From 5620655bd4d9ed23a398dd25289a75d5ac871001 Mon Sep 17 00:00:00 2001
From: "Felix W. Dekker" <felix@fwdekker.com>
Date: Thu, 13 Jun 2019 19:52:31 +0200
Subject: [PATCH] Consistify layout of columns

---
 index.html | 39 +++++++++++++++++++++++----------------
 1 file changed, 23 insertions(+), 16 deletions(-)

diff --git a/index.html b/index.html
index ac06f56..1a69c60 100644
--- a/index.html
+++ b/index.html
@@ -38,29 +38,36 @@
 
         <!-- Generators -->
         <section class="container">
+            <!-- Headers -->
             <div class="row">
-                <!-- Similar -->
                 <div class="column">
                     <h2>Similar names</h2>
-                    <form>
-                        <label for="similarInput">Your name</label>
-                        <input id="similarInput" type="text" autofocus />
-                        <button id="generateSimilar" type="button">Generate similar names</button>
-
-                        <label for="similarNames">Similar names are...</label>
-                        <textarea id="similarNames" style="height: 10em;" readonly></textarea>
-                    </form>
                 </div>
-
-                <!-- Random -->
                 <div class="column">
                     <h2>Random names</h2>
-                    <form class="form-inline">
-                        <button id="generateRandom" type="button">Generate random name</button>
+                </div>
+            </div>
+            <!-- Inputs -->
+            <div class="row">
+                <div class="column">
+                    <label for="similarInput">Your name</label>
+                    <input id="similarInput" type="text" autofocus />
+                </div>
+                <div class="column"></div>
+            </div>
+            <!-- Outputs -->
+            <div class="row">
+                <div class="column">
+                    <button id="generateSimilar" type="button">Generate similar names</button>
 
-                        <label for="randomNames">Your name is...</label>
-                        <textarea id="randomNames" style="height: 10em;" readonly></textarea>
-                    </form>
+                    <label for="similarNames">Similar names are...</label>
+                    <textarea id="similarNames" style="height: 10em;" readonly></textarea>
+                </div>
+                <div class="column">
+                    <button id="generateRandom" type="button">Generate random name</button>
+
+                    <label for="randomNames">Your name is...</label>
+                    <textarea id="randomNames" style="height: 10em;" readonly></textarea>
                 </div>
             </div>
         </section>