personal info form

src/BandForm.js

@@ -60,9 +60,36 @@ function BandForm({ band }) {
 
       <div className="total">
         <h3>Total</h3>
-        <p>${costToReadable(total)}</p>
+        <p aria-live="polite">${costToReadable(total)}</p>
       </div>
 
+      <div className="information">
+        <div className="form-row">
+          <input
+            name="first_name"
+            label="First Name"
+            placeholder="First Name"
+            type="text"
+          />
+          <input
+            name="last_name"
+            label="Last Name"
+            placeholder="Last Name"
+            type="text"
+          />
+        </div>
+        <input
+          name="address"
+          label="Address"
+          placeholder="Address"
+          type="text"
+        />
+      </div>
+
+      <fieldset className="payment">
+        <legend>Payment Details</legend>
+      </fieldset>
+
       <button type="submit" disabled={formIsPending}>Get Tickets</button>
     </form>
   );

src/index.css

@@ -1,6 +1,10 @@
 @import "./reset.css";
 @import "./variables.css";
 
+* {
+  box-sizing: border-box;
+}
+
 html {
   color: var(--color-text);
   font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen',
@@ -12,6 +16,12 @@ html {
   font-size: var(--font-base);
 }
 
+input {
+  width: 100%;
+  padding: 1rem;
+  font-size: var(--font-base);
+}
+
 hr {
   border-color: var(--color-text);
   border-width: 1px;
@@ -91,4 +101,16 @@ h4 {
     justify-content: space-between;
     font-size: var(--font-lg);
   }
+
+  .form-row {
+    display: flex;
+    flex-direction: row;
+    gap: var(--spacing-md);
+  }
+
+  .information, .payment {
+    display: flex;
+    flex-direction: column;
+    gap: var(--spacing-md);
+  }
 }