Move other input to be the label for the button

thanks @rschamp! Never would’ve thought label would accept html.

src/components/registration/steps.jsx

@@ -360,24 +360,24 @@ module.exports = {
                                         options={[
                                             {value: 'female', label: formatMessage({id: 'general.female'})},
                                             {value: 'male', label: formatMessage({id: 'general.male'})},
-                                            {value: 'other', label: ''}
+                                            {value: 'other', label: <Input
+                                                className="demographics-step-input-other"
+                                                name="user.genderOther"
+                                                type="text"
+                                                validations={{
+                                                    maxLength: 25
+                                                }}
+                                                validationErrors={{
+                                                    maxLength: formatMessage({
+                                                        id: 'registration.validationMaxLength'
+                                                    })
+                                                }}
+                                                disabled={this.state.otherDisabled}
+                                                required={!this.state.otherDisabled}
+                                                help={null}
+                                            />}
                                         ]}
                                         required />
-                            <div className="gender-input">
-                                <Input name="user.genderOther"
-                                       type="text"
-                                       validations={{
-                                           maxLength: 25
-                                       }}
-                                       validationErrors={{
-                                           maxLength: formatMessage({
-                                               id: 'registration.validationMaxLength'
-                                           })
-                                       }}
-                                       disabled={this.state.otherDisabled}
-                                       required={!this.state.otherDisabled}
-                                       help={null} />
-                            </div>
                             <Select label={formatMessage({id: 'general.country'})}
                                     name="user.country"
                                     options={getCountryOptions(this.props.intl, DEFAULT_COUNTRY)}

src/components/registration/steps.scss

@@ -13,7 +13,6 @@
         border-radius: 8px;
     }
 
-    .gender-input,
     .other-input {
         float: right;
         width: 90%;
@@ -61,19 +60,21 @@
     }
 
     &.demographics-step {
-        .gender-input {
-            margin-top: -5.5rem;
-        }
-
         .radio {
-            width: 50%;
+            margin: 1.5rem 1.5rem 0 0;
-            line-height: 3rem;
-            white-space: nowrap;
 
             input {
                 margin-right: 1rem;
             }
         }
+
+        .demographics-step-input-other {
+            display: inline-block;
+
+            .col-sm-9 {
+                display: inline-block;
+            }
+        }
     }
 
     &.phone-step {