JSFiddle - React, Tailwind, and code Playground

by Artem

HTML

<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="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>

CSS

form {
  display: grid;
  grid-template-columns: [labels] auto [controls] auto [oversized] auto;
  //grid-auto-flow: dense;
}

form > label {
  grid-column: labels;
  grid-row: auto;
}

form > input,
form > select {
  grid-column: controls;
  grid-row: auto;
}

#department-block {
  grid-column: oversized;
  grid-row: 7 / span 3;
  border: 1px solid #000;
}

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