CSS Grid Template Areas

.address-form {
  display: grid;
  max-width: 40ch;
  margin: 1em auto 2em;

  grid-column-gap: 1em;
  grid-template-columns: 1fr 1fr;
  grid-template-areas:
      "country country"
      "fname   fname"
      "lname   lname"
      "street1 street1"
      "street2 street2"
      "city    city"
      "state   postal"
      "phone   phone"
      "email   email";
}

.country {
  grid-area: country;
  margin-bottom: 1em;
}

.firstName {
  grid-area: fname;
}

.lastName {
  grid-area: lname;
}

.street1 {
  grid-area: street1;
}

.street2 {
  grid-area: street2;
}

.city {
  grid-area: city;
}

.state {
  grid-area: state;
  margin-top: 7px;
}

.postal {
  grid-area: postal;
}

.phone {
  grid-area: phone;
}

.email {
  grid-area: email;
}

.address-form .input-error {
  grid-column: 1 / span 2;
}