adding the missing resize example

rachelandrew · rachelandrew · commit 85ca8d2a791c · 2018-11-20T21:25:27.000+01:00
diff --git a/logical/size-resize.html b/logical/size-resize.html
@@ -0,0 +1,93 @@
+<!doctype html>
+<html lang="en">
+
+<head>
+    <meta charset="utf-8">
+    <title>Size: the resize property</title>
+    <link rel="stylesheet" href="../css-cookbook/styles.css">
+    <style>
+
+        .container {
+            display: flex;
+        }
+        .box {
+            border: 2px solid rgb(96, 139, 168);
+            border-radius: 5px;
+            background-color: rgba(96, 139, 168, .2);
+            padding: 10px;
+            margin: 10px;
+            overflow: scroll;
+        }
+
+      
+    </style>
+
+    <style class="editable">
+        .box {
+            writing-mode: horizontal-tb;
+        }
+
+        .physical {
+        width: 200px;
+        height: 100px;
+        resize: horizontal;
+        }
+
+        .logical {
+            inline-size: 200px;
+            block-size: 100px;
+            resize: inline;
+        }
+    </style>
+</head>
+
+<body>
+    <section class="preview">
+        <div class="container">
+            <div class="physical box">
+                I have a width of 200px and a height of 100px. I can be resized horizontally.
+            </div>
+
+            <div class="logical box">
+                I have an inline-size of 200px and a block-size of 100px. I can be resized in the inline direction.
+            </div>
+        </div>
+    </section>
+
+    <textarea class="playable playable-css" style="height: 240px;">
+.box {
+    writing-mode: horizontal-tb;
+}
+
+.physical {
+  width: 200px;
+  height: 100px;
+  resize: horizontal;
+}
+
+.logical {
+    inline-size: 200px;
+    block-size: 100px;
+    resize: inline;
+}</textarea>
+
+    <textarea class="playable playable-html" style="height: 180px;">
+<div class="container">
+    <div class="physical box">
+        I have a width of 200px and a height of 100px. I can be resized horizontally.
+    </div>
+
+    <div class="logical box">
+        I have an inline-size of 200px and a block-size  of 100px. I can be resized in the inline direction.
+    </div>
+</div>
+    </textarea>
+
+
+    <div class="playable-buttons">
+        <input id="reset" type="button" value="Reset">
+    </div>
+</body>
+<script src="../css-cookbook/playable.js"></script>
+
+</html>
