2 files changed, 44 insertions, 43 deletions

diff --git a/src/try_gleam.gleam b/src/try_gleam.gleam
index 05c07a9..8c030e9 100644
--- a/src/try_gleam.gleam
+++ b/src/try_gleam.gleam
@@ -379,8 +379,8 @@ fn page_html(page: Page) -> String {
       h("nav", [#("class", "navbar")], [
         h("a", [#("href", "/")], [text("Try Gleam")]),
       ]),
-      h("article", [#("class", "playground")], [
-        h("section", [#("id", "text")], [
+      h("article", [#("id", "playground")], [
+        h("section", [#("id", "left")], [
           htmb.dangerous_unescaped_fragment(string_builder.from_string(page.text,
           )),
           h("nav", [#("class", "prev-next")], [
@@ -391,10 +391,12 @@ fn page_html(page: Page) -> String {
             navlink("Next", page.next),
           ]),
         ]),
-        h("section", [#("id", "editor")], [
-          h("div", [#("id", "editor-target")], []),
+        h("section", [#("id", "right")], [
+          h("section", [#("id", "editor")], [
+            h("div", [#("id", "editor-target")], []),
+          ]),
+          h("aside", [#("id", "output")], []),
         ]),
-        h("aside", [#("id", "output")], []),
       ]),
       h("script", [#("type", "gleam"), #("id", "code")], [
         htmb.dangerous_unescaped_fragment(string_builder.from_string(page.code)),
diff --git a/static/style.css b/static/style.css
index fd229a4..113b57f 100644
--- a/static/style.css
+++ b/static/style.css
@@ -26,6 +26,8 @@
   --color-red: #ff6262;
   --color-orange: #ffd596;
   --color-green: #c8ffa7;
+
+  --navbar-height: calc(calc(2 * var(--gap)) + 20px);
   --gap: 12px;
 }
 
@@ -70,6 +72,7 @@ h6 {
   display: flex;
   justify-content: space-between;
   align-items: center;
+  height: var(--navbar-height);
   padding: var(--gap);
   background-color: var(--color-pink);
 }
@@ -80,67 +83,63 @@ h6 {
   color: #000;
 }
 
-.playground {
-  display: flex;
-  flex-direction: column;
-  flex-wrap: wrap;
-  flex: auto;
-  max-width: 100vw;
-}
-
-#text {
-  flex: 1;
+#left,
+#output,
+#editor {
+  min-height: 200px;
+  overflow-y: auto;
+  border-bottom: 2px solid var(--color-pink);
+  margin: 0;
+  overflow-wrap: break-word;
 }
 
-#text > :first-child {
+#left > :first-child {
   margin-top: 0;
 }
 
 #editor {
-  flex: 1;
   position: relative;
 }
 
-#output {
-  flex: 1;
-}
-
 @media (min-width: 600px) {
-  #text,
-  #output,
-  #editor {
+  #playground {
+    position: fixed;
+    top: 44px;
+    bottom: 0;
+    left: 0;
+    right: 0;
+  }
+
+  #left,
+  #right {
     width: 50vw;
+    position: absolute;
+    top: 0;
+    bottom: 0;
   }
-  #text {
-    flex-basis: 100%;
+
+  #left {
     border-right: 2px solid var(--color-pink);
   }
-  #editor {
-    flex: 1.62;
+
+  #right {
+    right: 0;
   }
-  #output,
-  #editor {
-    max-height: 50vh;
+
+  #right > :first-child {
+    height: 62%;
+  }
+  #right > :last-child {
+    height: 38%;
   }
 }
 
-#text,
+#left,
 #output > *,
 #editor .codeflask__flatten {
   padding: var(--gap);
 }
 
-#text,
-#output,
-#editor {
-  min-width: 50%;
-  max-width: 100%;
-  overflow-y: auto;
-  border-bottom: 2px solid var(--color-pink);
-  margin: 0;
-  overflow-wrap: break-word;
-}
-
 #output > * {
   margin: 0;
   white-space: pre-wrap;