row & label splitup

src/components/atoms/Form/Input.module.scss

@@ -1,9 +1,5 @@
 @import '../../../styles/variables';
 
-.formGroup {
-    margin-bottom: $spacer;
-}
-
 .inputWrap {
     background: $brand-gradient;
     border-radius: $border-radius;
@@ -95,27 +91,6 @@
     // }
 }
 
-.label {
-    color: $brand-grey;
-    font-size: $font-size-base;
-    font-family: $font-family-title;
-    line-height: 1.2;
-    display: block;
-    margin-bottom: $spacer / 6;
-}
-
-.required {
-    composes: label;
-
-    &:after {
-        content: '*';
-        font-size: $font-size-base;
-        color: $brand-grey-light;
-        display: inline-block;
-        margin-left: .1rem;
-    }
-}
-
 .select {
     composes: input;
     height: 43px;

src/components/atoms/Form/Input.tsx

@@ -2,6 +2,8 @@ import React, { PureComponent } from 'react'
 // import { ReactComponent as SearchIcon } from '../../../svg/search.svg'
 import Help from './Help'
 import styles from './Input.module.scss'
+import Label from './Label'
+import Row from './Row'
 
 interface IInputProps {
     name: string
@@ -63,14 +65,10 @@ export default class Input extends PureComponent<IInputProps, IInputState> {
         } = this.props
 
         return (
-            <div className={styles.formGroup}>
+            <Row>
-                <label
+                <Label htmlFor={name} required={required}>
-                    htmlFor={name}
-                    className={required ? styles.required : styles.label}
-                    title={required ? 'Required' : ''}
-                >
                     {label}
-                </label>
+                </Label>
                 <div className={this.inputWrapClasses()}>
                     <Tag
                         id={name}
@@ -89,7 +87,7 @@ export default class Input extends PureComponent<IInputProps, IInputState> {
                 {help && <Help>{help}</Help>}
 
                 {additionalComponent && additionalComponent}
-            </div>
+            </Row>
         )
     }
 }

src/components/atoms/Form/Label.module.scss

@@ -0,0 +1,22 @@
+@import '../../../styles/variables';
+
+.label {
+    color: $brand-grey;
+    font-size: $font-size-base;
+    font-family: $font-family-title;
+    line-height: 1.2;
+    display: block;
+    margin-bottom: $spacer / 6;
+}
+
+.required {
+    composes: label;
+
+    &:after {
+        content: '*';
+        font-size: $font-size-base;
+        color: $brand-grey-light;
+        display: inline-block;
+        margin-left: .1rem;
+    }
+}

src/components/atoms/Form/Label.tsx

@@ -0,0 +1,22 @@
+import React from 'react'
+import styles from './Label.module.scss'
+
+const Label = ({
+    required,
+    children,
+    ...props
+}: {
+    required?: boolean
+    children: string
+    htmlFor: string
+}) => (
+    <label
+        className={required ? styles.required : styles.label}
+        {...props}
+        title={required ? 'Required' : ''}
+    >
+        {children}
+    </label>
+)
+
+export default Label

src/components/atoms/Form/Row.module.scss

@@ -0,0 +1,5 @@
+@import '../../../styles/variables';
+
+.row {
+    margin-bottom: $spacer;
+}

src/components/atoms/Form/Row.tsx

@@ -0,0 +1,8 @@
+import React from 'react'
+import styles from './Row.module.scss'
+
+const Row = ({ children }: { children: any }) => (
+    <div className={styles.row}>{children}</div>
+)
+
+export default Row