Set common y-origin for validation bubbles

I believe this will keep the misalignment from happening across browsers. Sets the top left corner to the top left corner of the input block.

Resolves #770

src/components/card/card.scss

@@ -25,8 +25,9 @@
         $arrow-border-width: 1rem;
         display: block;
         position: absolute;
+        top: 0;
         left: 0;
-        transform: translate(20rem, -4rem);
+        transform: translate(16rem, 0);
         margin-left: $arrow-border-width;
         border: 1px solid $active-gray;
         border-radius: 5px;
@@ -58,15 +59,7 @@
         }
     }
 
-    .checkbox-row,
-    .textarea-row {
-        .validation-message {
-            transform: translate(20rem, 0);  
-        }
-    }
-
     .form {
-        position: relative;
         padding: 3rem 4rem;
 
         .card-button {
@@ -81,6 +74,10 @@
                     border: 1px solid $ui-orange;
                 }
             }
+
+            .col-sm-9 {
+                position: relative;
+            }
         }
     }
 }

src/components/registration/steps.scss

@@ -80,7 +80,7 @@
     &.organization-step {
         .checkbox-group {
             .validation-message {
-                transform: translate(20rem, -16rem);
+                transform: translate(16rem, -16rem);
             }
         }
 
@@ -95,14 +95,6 @@
         }
     }
 
-    &.address-step {
-        .select {
-            .validation-message {
-                transform: translate(20rem, .5rem);
-            }
-        }
-    }
-
     &.usescratch-step {
         .form {
             .form-group {