philomena/assets/css/elements/form.css

form .field {
  display: flex;
  gap: var(--padding-normal);
  margin-bottom: var(--padding-normal);
}

form .field:last-child {
  margin-bottom: 0;
}

form .form--two-column {
  display: grid;
  grid: inherit;
  grid-template-columns: 1 / -1;
  gap: var(--padding-normal);
}

form .form--two-column > .field,
form .form--two-column > li {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: var(--padding-normal);
}

form .form--three-items {
  display: grid;
  grid: inherit;
  grid-template-columns: 1 / -1;
  gap: var(--padding-normal);
}

form .form--three-items > .field {
  display: grid;
  grid-template-columns: auto 1fr;
  grid-template-rows: 1fr auto;
  gap: var(--padding-normal);
}

form .form--three-items > .field > *:nth-child(1) {
  grid-area: 1 / 1 / 2 / 2;
}

form .form--three-items > .field > *:nth-child(2) {
  grid-area: 1 / 2 / 2 / 3;
}

form .form--three-items > .field > *:nth-child(3) {
  grid-area: 2 / 1 / 3 / 3;
}

form .form--three-items select {
  width: fit-content;
}

form .with-error {
  display: block;
}

form label {
  display: flex;
  flex: 1 0 auto;
  align-self: center;
}