styles on filter form

app/soapbox/features/filters/index.js

@@ -139,22 +139,24 @@ class Filters extends ImmutablePureComponent {
           <div className='filter-settings-panel'>
             <fieldset disabled={false}>
               <FieldsGroup>
-
-                <SimpleInput
-                  label={intl.formatMessage(messages.keyword)}
-                  required
-                  type='text'
-                  name='phrase'
-                  onChange={this.handleInputChange}
-                />
-
-                <SelectDropdown
-                  label={intl.formatMessage(messages.expires)}
-                  hint={intl.formatMessage(messages.expires_hint)}
-                  items={expirations}
-                  defaultValue={expirations.never}
-                  onChange={this.handleSelectChange}
-                />
+                <div className='two-col'>
+                  <SimpleInput
+                    label={intl.formatMessage(messages.keyword)}
+                    required
+                    type='text'
+                    name='phrase'
+                    onChange={this.handleInputChange}
+                  />
+                  <div className='input with_label required'>
+                    <SelectDropdown
+                      label={intl.formatMessage(messages.expires)}
+                      hint={intl.formatMessage(messages.expires_hint)}
+                      items={expirations}
+                      defaultValue={expirations.never}
+                      onChange={this.handleSelectChange}
+                    />
+                  </div>
+                </div>
               </FieldsGroup>
 
               <FieldsGroup>
@@ -164,30 +166,32 @@ class Filters extends ImmutablePureComponent {
                 <span className='hint'>
                   <FormattedMessage id='filters.context_hint' defaultMessage='One or multiple contexts where the filter should apply' />
                 </span>
-                <Checkbox
-                  label={intl.formatMessage(messages.home_timeline)}
-                  name='home_timeline'
-                  checked={this.state.home_timeline}
-                  onChange={this.handleCheckboxChange}
-                />
-                <Checkbox
-                  label={intl.formatMessage(messages.public_timeline)}
-                  name='public_timeline'
-                  checked={this.state.public_timeline}
-                  onChange={this.handleCheckboxChange}
-                />
-                <Checkbox
-                  label={intl.formatMessage(messages.notifications)}
-                  name='notifications'
-                  checked={this.state.notifications}
-                  onChange={this.handleCheckboxChange}
-                />
-                <Checkbox
-                  label={intl.formatMessage(messages.conversations)}
-                  name='conversations'
-                  checked={this.state.conversations}
-                  onChange={this.handleCheckboxChange}
-                />
+                <div className='two-col'>
+                  <Checkbox
+                    label={intl.formatMessage(messages.home_timeline)}
+                    name='home_timeline'
+                    checked={this.state.home_timeline}
+                    onChange={this.handleCheckboxChange}
+                  />
+                  <Checkbox
+                    label={intl.formatMessage(messages.public_timeline)}
+                    name='public_timeline'
+                    checked={this.state.public_timeline}
+                    onChange={this.handleCheckboxChange}
+                  />
+                  <Checkbox
+                    label={intl.formatMessage(messages.notifications)}
+                    name='notifications'
+                    checked={this.state.notifications}
+                    onChange={this.handleCheckboxChange}
+                  />
+                  <Checkbox
+                    label={intl.formatMessage(messages.conversations)}
+                    name='conversations'
+                    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 {