slight modification to centering example

Author: chrisdavidmills

css-cookbook/center.html

@@ -21,18 +21,18 @@
         }
     </style>
 
-    <style class="editable">
-        .container {
-            height: 200px;
-            display: flex;
-            align-items: center;
-            justify-content: center;
-        }
+<style class="editable">
+  .container {
+      height: 200px;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+  }
 
-        .item {
-            width: 10em;
-        }
-    </style>
+  .item {
+      width: 10em;
+  }
+</style>
 
 </head>
 
@@ -43,24 +43,24 @@
         </div>
     </section>
 
-    <textarea class="playable playable-css">
-        .container {
-            height: 200px;
-            display: flex;
-            align-items: center;
-            justify-content: center;
-        }
-    
-        .item {
-            width: 10em;
-        }
-    </textarea>
+<textarea class="playable playable-css" style="height: 170px;">
+.container {
+    height: 200px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+}
 
-    <textarea class="playable playable-html">
-        <div class="container">
-            <div class="item">I am centered!</div>
-        </div>
-    </textarea>
+.item {
+    width: 10em;
+}
+</textarea>
+
+<textarea class="playable playable-html" style="height: 70px;">
+  <div class="container">
+      <div class="item">I am centered!</div>
+  </div>
+</textarea>
 
 
     <div class="playable-buttons">
@@ -70,4 +70,4 @@
 <script src="playable.js"></script>
 
 
-</html>
+</html>