diff --git a/examples/jotdown_wasm/Makefile b/examples/jotdown_wasm/Makefile
index 96ab265..d2a2b92 100644
--- a/examples/jotdown_wasm/Makefile
+++ b/examples/jotdown_wasm/Makefile
@@ -12,7 +12,7 @@ index.html: Makefile demo.html
 	echo '<head>' >> $@
 	echo '<title>Jotdown Demo</title>' >> $@
 	echo '</head>' >> $@
-	echo '<body>' >> $@
+	echo '<body style="display:flex;flex-direction:column;height:100vh;margin:0">' >> $@
 	cat demo.html >> $@
 	echo '</body>' >> $@
 	echo '</html>' >> $@
diff --git a/examples/jotdown_wasm/demo.html b/examples/jotdown_wasm/demo.html
index df27dd4..5876b28 100644
--- a/examples/jotdown_wasm/demo.html
+++ b/examples/jotdown_wasm/demo.html
@@ -1,5 +1,4 @@
-<select id="fmt"><option value="preview">preview</option><option value="html">html</option></select>
-<div id="jotdown" style="display:flex;">
+<div id="jotdown" style="flex-grow:1;display:flex;flex-direction:column">
   <script type="module">
     import init, { jotdown_render } from './pkg/jotdown_wasm.js';
     await init();
@@ -27,6 +26,14 @@
     // auto focus on input on load
     setTimeout(() => { input.focus(); }, 0);
   </script>
-  <pre id="input" contenteditable="true" placeholder="Input djot here" style="width:50%;height:100%;min-height:8em;max-height:20em;resize:none;margin:0">*Hello world!*</pre>
-  <pre id="output" readonly style="width:50%;height:100%;margin:0;min-height:8em;max-height:20em"></pre>
+  <div>
+    <select id="fmt">
+      <option value="preview">preview</option>
+      <option value="html">html</option>
+    </select>
+  </div>
+  <div id="panes" style="display:flex;height:100%;gap:1rem">
+    <pre id="input" contenteditable="true" placeholder="Input djot here" style="width:50%;height:100%;overflow:scroll;resize:none;box-sizing:border-box;margin:0">*Hello world!*</pre>
+    <pre id="output" readonly style="width:50%;height:100%;overflow:scroll;box-sizing:border-box;margin:0"></pre>
+  </div>
 </div>
