styles on filter form

app/soapbox/features/filters/index.js

@@ -139,7 +139,7 @@ class Filters extends ImmutablePureComponent {
           <div className='filter-settings-panel'>
             <fieldset disabled={false}>
               <FieldsGroup>
-
+                <div className='two-col'>
                   <SimpleInput
                     label={intl.formatMessage(messages.keyword)}
                     required
@@ -147,7 +147,7 @@ class Filters extends ImmutablePureComponent {
                     name='phrase'
                     onChange={this.handleInputChange}
                   />
-
+                  <div className='input with_label required'>
                     <SelectDropdown
                       label={intl.formatMessage(messages.expires)}
                       hint={intl.formatMessage(messages.expires_hint)}
@@ -155,6 +155,8 @@ class Filters extends ImmutablePureComponent {
                       defaultValue={expirations.never}
                       onChange={this.handleSelectChange}
                     />
+                  </div>
+                </div>
               </FieldsGroup>
 
               <FieldsGroup>
@@ -164,6 +166,7 @@ class Filters extends ImmutablePureComponent {
                 <span className='hint'>
                   <FormattedMessage id='filters.context_hint' defaultMessage='One or multiple contexts where the filter should apply' />
                 </span>
+                <div className='two-col'>
                   <Checkbox
                     label={intl.formatMessage(messages.home_timeline)}
                     name='home_timeline'
@@ -188,6 +191,7 @@ class Filters extends ImmutablePureComponent {
                     checked={this.state.conversations}
                     onChange={this.handleCheckboxChange}
                   />
+                </div>
 
               </FieldsGroup>
 

app/styles/components/filters.scss

@@ -13,7 +13,34 @@
     &:last-child {
       border-bottom: 0;
     }
+  }
 
+  .fields-group .two-col {
+    display: flex;
+    align-items: flex-start;
+    width: 100%;
+    justify-content: flex-start;
+    flex-wrap: wrap;
+
+    div.input {
+      width: 45%;
+      margin-right: 20px;
+
+      .label_input {
+        width: 100%;
+      }
+    }
+
+    @media(max-width: 485px){
+      div.input {
+        width: 100%;
+        margin-right: 5px;
+
+        .label_input {
+          width: auto;
+        }
+      }
+    }
   }
 
   .filter__container {