<form>
  <label for="firstname">First name:</label>
  <input type="text" id="firstname" name="firstname" />
  <label for="lastname">Last name:</label>
  <input type="text" id="lastname" name="lastname" />
  <label for="address">Address:</label>
  <input type="text" id="address" name="address" />
  <label for="address2">Address 2:</label>
  <input type="text" id="address2" name="address2" />
  <label for="city">City:</label>
  <input type="text" id="city" name="city" />
  <label for="state">State:</label>
  <select type="text" id="state" name="state">
    <option value="WA">Washington</option>
  </select>
  <label for="zip">Zip:</label>
  <input type="text" id="zip" name="zip" />

  <div id="department-block">
    <label for="department">Department:</label>
    <select id="department" name="department" multiple>
      <option value="finance">Finance</option>
      <option value="humanresources">Human Resources</option>
      <option value="marketing">Marketing</option>
    </select>
  </div>

  <div id="buttons">
    <button id="cancel">Cancel</button>
    <button id="back">Back</button>
    <button id="next">Next</button>
  </div>
</form>
@import url("https://fonts.googleapis.com/css2?family=Exo:wght@600&display=swap");

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  width: 100vw;
  min-height: 100vh;

  display: flex;
  justify-content: center;
  flex-direction: column;
  gap: 20px;
  font-family: "Exo", Arial, sans-serif;
  background-color: #f7f7f7;

  padding: 20px;
}

input,
select {
  padding: 15px;
  border: 1px solid #ccc;
  border-radius: 3px;
  color: #2c3e50;
  font-size: 13px;
}

button {
  --background: #275efe;
  --text: #fff;
  --shadow: rgba(10, 22, 50, 0.24);
  display: inline-flex;
  justify-content: center;
  align-items: center;
  background: var(--background);
  border-radius: 4px;
  box-shadow: 0 2px 8px -1px var(--shadow);
  color: var(--text);
  transition: transform 0.2s ease, box-shadow 0.2s ease;
  border: none 0;
  cursor: pointer;
  min-width: 100px;
  min-height: 44px;
  padding: 5px 10px;
  font-family: "Exo", Arial, sans-serif;
}
button:not(:first-child) {
  margin-left: 14px;
}
#cancel {
  --background: #242836;
  --text: #f5f9ff;
}
#next {
  --background: #e91e63;
  --text: #f5f9ff;
}

button:hover {
  transform: scale(0.95);
  box-shadow: 0 1px 4px -1px var(--shadow);
}

form {
  max-width: 60vw;
  box-shadow: 0 0 0 6px rgb(0 0 0 / 13%);
  padding: 10px;
  border-radius: 6px;
  margin: auto;
  display: grid;
  grid-template-columns: [labels] auto [controls] auto [oversized] auto;
  grid-auto-flow: row dense;
  gap: 10px;
}
form > label {
  grid-column: labels;
  grid-row: auto;
  align-self: center;
}
form > input,
form > select {
  grid-column: controls;
  grid-row: auto;
}

#department-block {
  grid-column: oversized;
  grid-row: span 3;
}

#buttons {
  grid-row: auto;
  grid-column: 1 / -1;
  text-align: end;
}

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.