dl {
  display: grid;
  grid-template-columns: fit-content(20ch) auto;
}

dt {
  font-weight: bold;
  text-align: right;
  grid-column: 1;
  margin-right: 1em;
}

dd {
  grid-column: 2;
  margin-left: 1em;
}

/* Validation feedback via HTML5 pseudo-classes.
   :not(:placeholder-shown) prevents error styling on untouched fields. */
.input:not(:placeholder-shown):invalid,
.textarea:not(:placeholder-shown):invalid {
  border-color: #f14668;
  box-shadow: 0 0 0 0.125em rgba(241, 70, 104, 0.25);
}

.input:not(:placeholder-shown):valid,
.textarea:not(:placeholder-shown):valid {
  border-color: #48c78e;
  box-shadow: 0 0 0 0.125em rgba(72, 199, 142, 0.25);
}