css-sandbox/form/field.css

.field {
  display: flex;
  align-items: center;
  background-color: var(--color-field);
}

.field--grid {
  display: grid;
  grid-template-areas: 
    "label input"
    "error error";
  grid-template-columns: 33% 67%;
}

.field--error {

}
.field--error .field__input { 
  border: solid 2px red;
  color: red;
  font-weight: bold;
}

.field--grid .field__label {
  grid-area: label;
}
.field--grid .field__input {
  grid-area: input;
}
.field--grid .field__error {
  grid-area: error;
  color: red;
  font-size: 80%;
  text-align: right;
}

.field__label {
  flex: 1;
  background-color: var(--color-label);
}

.field__input {
  flex: 2;
  background-color: var(--color-input);
}