diff --git a/style/base.css b/style/base.css
index f206f4d..3142b20 100644
--- a/style/base.css
+++ b/style/base.css
@@ -2,9 +2,35 @@ body {
     font-family: -apple-system, "BlinkMacSystemFont", "Segoe UI", "Roboto", "Helvetica Neue", "Arial", "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
 }
 
+form:focus-within .form-search, form .form-search:hover {
+    display: block;
+}
+
+.form-search {
+    padding: 10px;
+    display: none;
+    border-bottom: 1px solid #ddd;
+    position: absolute;
+    background: #fff;
+    z-index: 100;
+    left: 0;
+    width: 100%;
+}
+
+.form-search .form-group label {
+	font-weight: normal;
+}
+
 .form-search .form-group {
     margin-bottom: 0.2em;
-    margin-right: 40px;
+}
+
+.form-search .form-group > label:first-child {
+    border-bottom: 1px solid #eee;
+    padding-bottom: 5px;
+    margin-bottom: 10px;
+    margin-top: 15px;
+    width: 100%;
 }
 
 @media screen and (max-width: 768px) {
@@ -16,16 +42,20 @@ body {
 @supports (display: flex) {
     @media screen and (min-width: 768px) {
         .form-search {
-            display: flex;
             justify-content: space-between;
             flex-flow: wrap;
         }
+        form:focus-within .form-search, form .form-search:hover {
+            display: flex;
+        }
         .form-search .form-group {
-            margin-right: 1em;
-            margin-left: 1em;
+            width: 25%;
             flex-shrink: 0;
             display: block;
         }
+        .form-search .form-group label {
+            width: 100%;
+        }
     }
 }