From 07ce4de979087c180b57571925d59676c567967d Mon Sep 17 00:00:00 2001
From: Mike Smith <89040888+smiggiddy@users.noreply.github.com>
Date: Sun, 5 Nov 2023 15:26:13 -0500
Subject: [PATCH] feat: fixed form field alignment

---
 signup_form/css/style.css | 17 +++++++++--------
 signup_form/index.html    | 12 +++++++-----
 2 files changed, 16 insertions(+), 13 deletions(-)

diff --git a/signup_form/css/style.css b/signup_form/css/style.css
index 46ea19b..fae7c7f 100644
--- a/signup_form/css/style.css
+++ b/signup_form/css/style.css
@@ -14,7 +14,6 @@
     display: flex;
     justify-content: flex-start;
     flex-direction: column;
-    flex-wrap: wrap;
 }
 
 .form-input input[type='text'],
@@ -29,7 +28,7 @@
   }
   
 .form-input label {
-    margin-bottom: 15px;
+    margin-bottom: 5px;
 }
 
 @media only screen and (min-width: 700px) {
@@ -42,11 +41,16 @@
     .form {
         width: 50vw;
     }
+    form {
+        display: flex;
+        flex-wrap: wrap;
+        width: 600px;
+        gap: 20px;
+    }
 
     .form-input {
-        flex-direction: row;
         align-items: flex-start; /* To avoid stretching */
-        margin-bottom: 20px;
+        margin-bottom: 10px;
     }
     .form-input input[type='text'],
     .form-input input[type='password'],
@@ -55,10 +59,7 @@
         height: initial;
     }
     .form-input label {
-        text-align: right;
-        width: 120px;
-        margin-top: 7px;
-        padding-right: 20px;
+        width: 250px;
     }
 }
 
diff --git a/signup_form/index.html b/signup_form/index.html
index d5c213a..dd4fd36 100644
--- a/signup_form/index.html
+++ b/signup_form/index.html
@@ -18,23 +18,25 @@
             <h1 class="call-to-action">Join our mailing list!</h1>
             <form action="" method="post">
                 <div class="form-input">
-                    <label for="name">Name</label>
+                    <label for="name">NAME</label>
                     <input type="text" name="name" id="name" placeholder="Enter your name." required>
                 </div>
                 <div class="form-input">
-                    <label for="email">Email</label>
+                    <label for="email">EMAIL</label>
                     <input type="email" name="email" id="email" placeholder="you@example.com" required>
                 </div>
                 <div class="form-input">
-                    <label for="password">Password</label>
+                    <label for="password">PASSWORD</label>
                     <input type="password" name="password" id="password" required minlength="8">
                 </div>
                 <div class="form-input">
-                    <label for="password_confirmation">Confirm Password</label>
+                    <label for="password_confirmation">CONFIRM PASSWORD</label>
                     <input type="password" name="password_confirmation" id="password_confirmation" required
                         minlength="8">
                 </div>
-                <button type="submit">Sign Up</button>
+                <div class="form-input">
+                    <button type="submit">Sign Up</button>
+                </div>
             </form>
         </div>
     </div>