src/index.html

@@ -1614,10 +1614,10 @@
                   <div class="form-group">
                     <span class="form-group-addon"><i class="i-file-video-o"></i></span>
                     <input class="form-control" placeholder="Default Text (disabled)" type="text" disabled />
+                    <div class="form-text">
+                      Sorry, this field looks too awesome
+                    </div>
                   </div>
-                  <p class="error">
-                    Sorry, this field looks too awesome
-                  </p>
                 </div>
                 <div class="col-md-6">
                   <label for="last_name">Field with button on the right</label>
@@ -1631,10 +1631,10 @@
                   <div class="form-group has-error">
                     <span class="form-group-addon"><i class="i-map-marker"></i></span>
                     <input class="form-control" id="city" name="city" placeholder="City" type="text" value="Amsterdam">
+                    <div class="form-text">
+                      Can't hear you over the beauty of this field
+                    </div>
                   </div>
-                  <p class="error">
-                    Can't hear you over the beauty of this field
-                  </p>
                 </div>
               </div>
 

src/styles/_forms.sass

@@ -122,14 +122,12 @@ label sup,
     text-decoration: underline
 
 .form-group
-  align-items: center
-  display: flex
-  justify-content: end
   position: relative
 
   .form-group-addon
     position: absolute
     right: var(--spacer-2)
+    top: var(--spacer-2)
 
   &:has([type="checkbox"]),
   &:has([type="radio"])