fixing spacing on flex wrapping examples

Author: chrisdavidmills

flexbox/wrapping/column-wrap.html

@@ -26,11 +26,11 @@
     }
 
     textarea:nth-of-type(1) {
-      height: 80px
+      height: 160px
     }
 
     textarea:nth-of-type(2) {
-      height: 90px
+      height: 200px
     }
 
     .playable-buttons {
@@ -62,7 +62,7 @@
     }
 
     .box {
-      
+
       border: 2px dotted rgb(96, 139, 168);
     }
   </style>

flexbox/wrapping/flex-grid.html

@@ -27,11 +27,11 @@
     }
 
     textarea:nth-of-type(1) {
-      height: 80px
+      height: 160px
     }
 
     textarea:nth-of-type(2) {
-      height: 90px
+      height: 210px
     }
 
     .playable-buttons {
@@ -63,7 +63,7 @@
     }
 
     .box {
-      
+
       border: 2px dotted rgb(96, 139, 168);
     }
   </style>
@@ -77,7 +77,7 @@
       .box>* {
           flex: 0 0 33.3333%;
       }
-    
+
   </style>
 </head>
 
@@ -105,7 +105,7 @@
       .box>* {
           flex: 0 0 33.3333%;
       }
-    
+
   </textarea>
   <textarea id="code" class="playable-html">
       <div class="box">

flexbox/wrapping/gaps.html

@@ -27,11 +27,11 @@
     }
 
     textarea:nth-of-type(1) {
-      height: 80px
+      height: 260px
     }
 
     textarea:nth-of-type(2) {
-      height: 90px
+      height: 240px
     }
 
     .playable-buttons {
@@ -63,8 +63,8 @@
     }
 
     .box {
-      
-      
+
+
     }
   </style>
 
@@ -74,7 +74,7 @@
         width: 500px;
       }
     .box {
-        
+
         display: flex;
         flex-wrap: wrap;
         margin:-10px;
@@ -83,7 +83,7 @@
           flex: 1 1 160px;
           margin: 10px;
       }
-    
+
   </style>
 </head>
 
@@ -110,7 +110,7 @@
         width: 500px;
       }
     .box {
-        
+
         display: flex;
         flex-wrap: wrap;
         margin:-10px;
@@ -119,7 +119,7 @@
         flex: 1 1 160px;
         margin: 10px;
       }
-    
+
   </textarea>
   <textarea id="code" class="playable-html">
       <div class="wrapper">

flexbox/wrapping/grid-example.html

@@ -26,11 +26,11 @@
     }
 
     textarea:nth-of-type(1) {
-      height: 80px
+      height: 90px
     }
 
     textarea:nth-of-type(2) {
-      height: 90px
+      height: 220px
     }
 
     .playable-buttons {
@@ -72,7 +72,7 @@
       display: grid;
       grid-template-columns: repeat(auto-fill,minmax(160px, 1fr));
     }
-    
+
   </style>
 </head>
 
@@ -96,7 +96,7 @@
         display: grid;
         grid-template-columns: repeat(auto-fill,minmax(160px, 1fr));
     }
-    
+
   </textarea>
   <textarea id="code" class="playable-html">
       <div class="box">

flexbox/wrapping/row-reverse-wrap.html

@@ -26,11 +26,11 @@
     }
 
     textarea:nth-of-type(1) {
-      height: 80px
+      height: 160px
     }
 
     textarea:nth-of-type(2) {
-      height: 90px
+      height: 220px
     }
 
     .playable-buttons {

flexbox/wrapping/row-wrap.html

@@ -26,11 +26,11 @@
     }
 
     textarea:nth-of-type(1) {
-      height: 80px
+      height: 140px
     }
 
     textarea:nth-of-type(2) {
-      height: 90px
+      height: 200px
     }
 
     .playable-buttons {

flexbox/wrapping/visibility-collapse.html

@@ -27,7 +27,7 @@
     }
 
     textarea:nth-of-type(1) {
-      height: 80px
+      height: 160px
     }
 
     textarea:nth-of-type(2) {

flexbox/wrapping/wrapped-visibility-collapse.html

@@ -27,11 +27,11 @@
     }
 
     textarea:nth-of-type(1) {
-      height: 80px
+      height: 180px
     }
 
     textarea:nth-of-type(2) {
-      height: 160px
+      height: 260px
     }
 
     .playable-buttons {