Create class to style phone numbers and extensions

atst/forms/edit_user.py

@@ -22,7 +22,6 @@ USER_FIELDS = {
     ),
     "phone_number": TelField(
         "Phone Number",
-        description="Enter your 10-digit U.S. phone number",
         validators=[PhoneNumber()],
     ),
     "phone_ext": StringField("Extension"),

styles/elements/_inputs.scss

@@ -314,3 +314,36 @@ select {
   }
 
 }
+
+.phone-input {
+  display: flex;
+  flex-direction: row;
+
+  .phone-input__phone {
+    margin-right: ($gap * 4);
+
+    .usa-input {
+      input, label, .usa-input__message {
+        max-width: 20rem;
+      }
+
+      .icon-validation {
+        left: 20rem;
+      }
+    }
+  }
+
+  .phone-input__extension {
+    margin-left: ($gap * 4);
+
+    .usa-input {
+      input, label {
+        max-width: 8rem;
+      }
+
+      .icon-validation {
+        left: 5em;
+      }
+    }
+  }
+}

templates/fragments/edit_user_form.html

@@ -16,15 +16,13 @@
         </div>
       </div>
 
-      <div class='form-row'>
-        <div class='form-col form-col--half'>
       {{ TextInput(form.email, validation='email') }}
-        </div>
 
-        <div class='form-col form-col--third'>
+      <div class='phone-input'>
+          <div class='phone-input__phone'>
             {{ TextInput(form.phone_number, validation='usPhone') }}
           </div>
-        <div class='form-col form-col--sixth'>
+          <div class='phone-input__extension'>
             {{ TextInput(form.phone_ext)}}
           </div>
       </div>