Add, document styling for field prefixes, suffixes

Styling based on `.inline-label`, but designed to suit own own form/
field CSS structure better.

User Story # 18949

app/assets/stylesheets/content/_forms.md

@@ -140,14 +140,20 @@
       </div>
     </div>
     <div class="form--field -required">
-      <label class="form--label">Number:</label>
+      <label class="form--label">Amount:</label>
       <div class="form--field-container">
+        <div class="form--field-affix">
+          <strong>€</strong>
+        </div>
         <div class="form--text-field-container">
           <input type="number" class="form--text-field">
         </div>
+        <div class="form--field-affix">
+          per item
+        </div>
       </div>
       <div class="form--field-instructions">
-        Any number from 1 to 10!
+        The more, the better
       </div>
     </div>
     <div class="form--field -required">
@@ -244,6 +250,29 @@
         One never lies about one's age.
       </div>
     </div>
+    <div class="form--field">
+      <label class="form--label">Benzinverbrauch:</label>
+      <div class="form--field-container">
+        <div class="form--text-field-container">
+          <input type="number" class="form--text-field" value="9">
+        </div>
+        <div class="form--field-affix">Liter</div>
+        <div class="form--field-affix">pro</div>
+        <div class="form--select-container">
+          <select class="form--select">
+            <option selected>km</option>
+            <option>Meile</option>
+          </select>
+        </div>
+        <div class="form--field-affix">auf</div>
+        <div class="form--select-container">
+          <select class="form--select">
+            <option selected>der Autobahn</option>
+            <option>der Stadt</option>
+          </select>
+        </div>
+      </div>
+    </div>
     <div class="form--grouping" role="group" aria-labelledby="form-grouping-label">
       <div id="form-grouping-label" class="form--grouping-label">Colors:</div>
       <div class="form--grouping-row">
@@ -323,6 +352,9 @@
           <div class="form--text-field-container">
             <input type="number" class="form--text-field">
           </div>
+          <div class="form--field-affix">
+            unit
+          </div>
         </div>
         <div class="form--field-instructions">
           Any number from 1 to 10!

app/assets/stylesheets/content/_forms.sass

@@ -250,6 +250,7 @@ fieldset.form--fieldset
   display: flex
   // cancel out foundations overflow-y: auto
   overflow-y: visible
+  align-items: stretch
 
   &.-vertical
     display: block
@@ -427,3 +428,20 @@ fieldset.form--fieldset
   & > .form--check-box-container
     display: block
     float:   left
+
+.form--field-affix
+  flex:           0 0 auto
+  display:        flex
+  font-size:      0.9rem
+  background:     $inlinelabel-background
+  color:          $inlinelabel-color
+  border:         $content-form-input-border
+  // OR $inlinelabel-border
+  border-radius:  2px
+  padding:        0 $form-padding
+  margin-bottom:  0.5rem
+  align-items:    center
+
+  %form--field-element-container + &
+    margin-left:  -1rem
+    border-left:  0