use `rowClassName` instead

so that it can include `label`. Also add some default styling to `label` in `.row`. Thanks @rschamp!

src/components/card/card.scss

@@ -58,6 +58,13 @@
         }
     }
 
+    .checkbox-row,
+    .textarea-row {
+        .validation-message {
+            transform: translate(20rem, 0);  
+        }
+    }
+
     .form {
         position: relative;
         padding: 3rem 4rem;
@@ -66,7 +73,7 @@
             margin: 0 0 -3rem -4rem;
         }
 
-        .form-group {        
+        .row {        
             margin-bottom: 1.2rem;
 
             &.has-error {
@@ -74,14 +81,6 @@
                     border: 1px solid $ui-orange;
                 }
             }
-
-            .checkbox-row,
-            .phone-input,
-            .textarea-group {
-                .validation-message {
-                    transform: translate(20rem, 0);  
-                }
-            }
         }
     }
 }

src/components/forms/checkbox.jsx

@@ -15,7 +15,7 @@ var Checkbox = React.createClass({
             this.props.className
         );
         return (
-            <FRCCheckbox elementWrapperClassName={classes} {... this.props} />
+            <FRCCheckbox rowClassName={classes} {... this.props} />
         );
     }
 });

src/components/forms/input.scss

@@ -12,7 +12,7 @@ $pass-bg: lighten($ui-aqua, 35%);
 
 .input {
     transition: all .5s ease;
-    margin: .75rem 0;
+    margin-bottom: .75rem;
     border: 1px solid $active-gray;
     border-radius: 5px;
     background-color: $base-bg;

src/components/forms/phone-input.jsx

@@ -42,7 +42,7 @@ var PhoneInput = React.createClass({
         return (
             <Row {... this.getRowProperties()}
                  htmlFor={this.getId()}
-                 elementWrapperClassName={classNames('phone-input', this.props.className)}
+                 rowClassName={classNames('phone-input', this.props.className)}
             >
                 <div className="input-group">
                     <ReactPhoneInput className="form-control"
@@ -53,9 +53,9 @@ var PhoneInput = React.createClass({
                                      label={null}
                                      disabled={this.isFormDisabled() || this.props.disabled}
                     />
+                    {this.renderErrorMessage()}
                 </div>
                 {this.renderHelp()}
-                {this.renderErrorMessage()}
             </Row>
         );
     }

src/components/forms/phone-input.scss

 @import "../../colors";
 
 .input-group {
-    margin: .75rem 0;
     width: 100%;
 }
 
 .react-tel-input {
+    margin-bottom: .75rem;
     width: 100%;
 
     input {

src/components/forms/row.scss

@@ -4,8 +4,13 @@
  * the formsy-react-components
  */
 
-.form-group {
+.row {
     .required-symbol {
         display: none;
     }
+
+    label {
+        display: inline-block;
+        margin-bottom: .75rem;
+    }
 }

src/components/forms/select.scss

@@ -8,7 +8,7 @@
 
     select {
         transition: all .5s ease;
-        margin: .75rem 0;
+        margin-bottom: .75rem;
         border: 1px solid $active-gray;
         border-radius: 5px;
         background: $ui-light-gray url("../../../static/svgs/forms/carot.svg") no-repeat right center;

src/components/forms/textarea.jsx

@@ -17,7 +17,7 @@ var TextArea = React.createClass({
         return (
             <FRCTextarea {... this.props}
                          className={classes}
-                         elementWrapperClassName="textarea-group" />
+                         rowClassName="textarea-row" />
         );
     }
 });

src/components/forms/textarea.scss

@@ -2,7 +2,7 @@
 
 .textarea {
     transition: all 1s ease;
-    margin: .75rem 0;
+    margin-bottom: .75rem;
     border: 1px solid $active-gray;
     border-radius: 5px;
     background-color: $ui-light-gray;

src/components/registration/steps.scss

@@ -66,16 +66,6 @@
                 margin-bottom: 1.25rem;
             }
         }
-
-        .validation-message {
-            margin-top: .5rem;
-        }
-
-        .checkbox-row {
-            .validation-message {
-                margin-top: 0;
-            }
-        }
     }
 
     &.organization-step {
@@ -115,12 +105,6 @@
                     }
                 }
             }
-
-
-        }
-
-        .validation-message {
-            margin-top: .75rem;
         }
 
         p {