Merge pull request #437 from dod-ccpo/request-filter-dod-component

Allow CCPO to filter requests by DOD component

styles/components/_search_bar.scss

@@ -6,40 +6,45 @@
   padding: $gap;
   flex-wrap: wrap;
 
+  @media (min-width:1000px) {
+    flex-wrap: nowrap;
+  }
+
   .usa-input {
-    margin: 0;
-    flex-grow: 1;
-    flex-shrink: 0;
-    flex-basis: 100%;
+    margin: $gap 0 0 $gap;
     height: $search-input-height;
     position: relative;
-    margin-top: $gap;
-
-    @include media($large-screen) {
-      flex-shrink: 1;
-      flex-basis: auto;
-      margin-top: 0;
-      margin-left: $gap;
-    }
 
     label {
       @include hide;
     }
+  }
 
-    &:first-child {
-      margin-left: 0;
-      margin-top: 0;
+  .search-bar__filters {
+    display: flex;
+    flex: 1;
+    flex-grow: 1;
+    flex-basis: 100%;
+
+    .usa-input {
+      @media (min-width:1000px) {
+        margin-top: 0;
+      }
+
+      &:first-child {
+        margin-left: 0;
+
+        @media (min-width:1000px) {
+          margin-left: $gap;
+        }
+      }
     }
   }
 
   .search-input {
-    @include media($medium-screen) {
-      flex-basis: 50%;
-    }
-
-    @media (min-width:800px) and (max-width:900px) {
-      flex-basis: auto;
-    }
+    margin-left: 0;
+    margin-top: 0;
+    flex-basis: 100%;
 
     input[type='search'] {
       width: auto;