Fix SignupForm first/last name validation error UI styles

src/containers/SignupForm/SignupForm.css

@@ -6,6 +6,10 @@
   height: 100%;
 }
 
+.name {
+  display: flex;
+}
+
 .firstName {
   display: inline-block;
   width: 35%;

src/containers/SignupForm/SignupForm.js

@@ -92,22 +92,24 @@ class SignupFormComponent extends Component {
             validate={emailRequired}
             component={this.EnhancedInput}
           />
-          <Field
-            className={css.firstName}
-            name="firstName"
-            type="text"
-            label={firstNameLabel}
-            validate={firstNameRequired}
-            component={this.EnhancedFirstNameInput}
-          />
-          <Field
-            className={css.lastName}
-            name="lastName"
-            type="text"
-            label={lastNameLabel}
-            validate={lastNameRequired}
-            component={this.EnhancedLastNameInput}
-          />
+          <div className={css.name}>
+            <Field
+              className={css.firstName}
+              name="firstName"
+              type="text"
+              label={firstNameLabel}
+              validate={firstNameRequired}
+              component={this.EnhancedFirstNameInput}
+            />
+            <Field
+              className={css.lastName}
+              name="lastName"
+              type="text"
+              label={lastNameLabel}
+              validate={lastNameRequired}
+              component={this.EnhancedLastNameInput}
+            />
+          </div>
           <Field
             name="password"
             type="password"

src/containers/SignupForm/__snapshots__/SignupForm.test.js.snap

@@ -23,42 +23,45 @@ exports[`SignupForm matches snapshot 1`] = `
         value="" />
     </div>
     <div
-      className="">
-      <label
-        className=""
-        htmlFor="firstName">
-        First name
-      </label>
-      <input
-        className=""
-        name="firstName"
-        onBlur={[Function]}
-        onChange={[Function]}
-        onDragStart={[Function]}
-        onDrop={[Function]}
-        onFocus={[Function]}
-        placeholder=""
-        type="text"
-        value="" />
-    </div>
-    <div
-      className="">
-      <label
-        className=""
-        htmlFor="lastName">
-        Last name
-      </label>
-      <input
-        className=""
-        name="lastName"
-        onBlur={[Function]}
-        onChange={[Function]}
-        onDragStart={[Function]}
-        onDrop={[Function]}
-        onFocus={[Function]}
-        placeholder=""
-        type="text"
-        value="" />
+      className={undefined}>
+      <div
+        className="">
+        <label
+          className=""
+          htmlFor="firstName">
+          First name
+        </label>
+        <input
+          className=""
+          name="firstName"
+          onBlur={[Function]}
+          onChange={[Function]}
+          onDragStart={[Function]}
+          onDrop={[Function]}
+          onFocus={[Function]}
+          placeholder=""
+          type="text"
+          value="" />
+      </div>
+      <div
+        className="">
+        <label
+          className=""
+          htmlFor="lastName">
+          Last name
+        </label>
+        <input
+          className=""
+          name="lastName"
+          onBlur={[Function]}
+          onChange={[Function]}
+          onDragStart={[Function]}
+          onDrop={[Function]}
+          onFocus={[Function]}
+          placeholder=""
+          type="text"
+          value="" />
+      </div>
     </div>
     <div
       className="">