#3 omg layout

freestyle.css

@@ -133,15 +133,19 @@ h1 {
 }
 
 label {
+  --juice: flex-start;
   contain: layout;
   display: inline-flex;
   flex-basis: 50%;
   flex-flow: row;
   flex-basis: 50%;
+  align-items: flex-end;
 }
 
 label:nth-child(odd) {
+  --juice: flex-end;
   flex-flow: row-reverse;
+  align-self: flex-end;
 }
 
 input {
@@ -153,6 +157,9 @@ input {
 }
 
 code {
+  display: inline-flex;
+  justify-content: var(--juice);
+  align-self: center;
   flex-basis: 38.2%;
   font: inherit;
   padding-inline: 1ch;
@@ -161,6 +168,7 @@ code {
 footer {
   flex-basis: 61.8%;
   margin: 0 auto 1em;
+  contain: layout;
   display: flex;
 }
 
@@ -175,7 +183,7 @@ button {
 }
 
 button {
-  flex-basis: 61%;
+  flex-basis: 61.8%;
   font-size: 1.618em;
   margin: 1em auto;
   text-decoration: underline;
@@ -205,3 +213,14 @@ figcaption {
   padding: 1rem;
   max-width: 61.8vmax;
 }
+
+@media (orientation: portrait) {
+  button { 
+    flex-basis: 100%;
+  }
+
+  code {
+    align-items: center;
+    writing-mode: vertical-rl;
+  }
+}