Use CSS grid for the header element

... and move the mobile search into the `header` too

Author: Turbo87

app/styles/application.module.css

@@ -70,12 +70,10 @@ noscript {
 }
 
 .header {
-    color: white;
-    position: relative;
-    height: 100px;
-    display: flex;
+    display: grid;
+    grid-template-columns: auto auto 1fr auto;
     align-items: center;
-    justify-content: space-between;
+    color: white;
 
     a {
         color: white; text-decoration: none;
@@ -116,6 +114,8 @@ input.search {
 
 .mobile-search {
     display: none;
+    grid-row: 2;
+    grid-column: span 4;
     margin-bottom: 10px;
     margin-left: 5px;
     margin-right: 5px;

app/templates/application.hbs

@@ -101,22 +101,22 @@
         </dd.Menu>
       </Dropdown>
     </div>
-  </header>
 
-  <form local-class='mobile-search' action='/search' {{ action "search" on="submit" }} >
-    <input
-      type="text"
-      local-class="search"
-      name="q"
-      id="cargo-mobile-search"
-      placeholder="Search"
-      value={{this.searchQuery}}
-      oninput={{action (mut this.searchQuery) value="target.value"}}
-      autocorrect="off"
-      required
-    >
-    <label for="cargo-mobile-search" local-class="search-label">Search</label>
-  </form>
+    <form local-class='mobile-search' action='/search' {{ action "search" on="submit" }} >
+      <input
+        type="text"
+        local-class="search"
+        name="q"
+        id="cargo-mobile-search"
+        placeholder="Search"
+        value={{this.searchQuery}}
+        oninput={{action (mut this.searchQuery) value="target.value"}}
+        autocorrect="off"
+        required
+      >
+      <label for="cargo-mobile-search" local-class="search-label">Search</label>
+    </form>
+  </header>
 
   <main local-class="main">
     <FlashMessage @message={{this.flashMessages.message}} />