From 62a2bb042edc3b43198fb5faf7b74c68d0e4b7be Mon Sep 17 00:00:00 2001
From: "Felix W. Dekker" <felix@fwdekker.com>
Date: Thu, 29 Apr 2021 13:26:50 +0200
Subject: [PATCH] Prevent columns from interleaving

Fixes #2.
---
 package.json          |  2 +-
 src/main/css/main.css | 12 ++++++++++++
 src/main/index.html   | 22 +++++-----------------
 3 files changed, 18 insertions(+), 18 deletions(-)

diff --git a/package.json b/package.json
index 633efc1..56d352d 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
     "name": "codsworth-namegen",
-    "version": "1.1.5",
+    "version": "1.1.6",
     "description": "Choose a fitting name for your Fallout 4 character that Codsworth can pronounce",
     "author": "Felix W. Dekker",
     "browser": "dist/bundle.js",
diff --git a/src/main/css/main.css b/src/main/css/main.css
index 762363a..1046acd 100644
--- a/src/main/css/main.css
+++ b/src/main/css/main.css
@@ -1,3 +1,15 @@
 textarea.nameArea {
     height: 10em;
 }
+
+@media (min-width: 600px) {
+    .spacer {
+        visibility: hidden;
+    }
+}
+
+@media (max-width: 600px) {
+    .spacer {
+        display: none;
+    }
+}
diff --git a/src/main/index.html b/src/main/index.html
index 44db280..7450754 100644
--- a/src/main/index.html
+++ b/src/main/index.html
@@ -33,36 +33,24 @@
     <div id="contents">
         <div id="header"></div>
 
-        <!-- Generators -->
         <section class="container">
-            <!-- Headers -->
             <div class="row">
                 <div class="column">
                     <h2>Similar names</h2>
-                </div>
-                <div class="column">
-                    <h2>Random names</h2>
-                </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="similarNames">Similar names are...</label>
                     <textarea id="similarNames" class="nameArea" readonly></textarea>
                 </div>
                 <div class="column">
+                    <h2>Random names</h2>
+                    <!-- Spacer to put textareas at same height -->
+                    <label for="spacerInput" class="spacer">Spacer</label>
+                    <input id="spacerInput" class="spacer" type="text" />
+
                     <button id="generateRandom" type="button">Generate random name</button>
 
                     <label for="randomNames">Your name is...</label>