css-sandbox/form/style.css

:root {
  --color-form: rgb(203, 222, 228);
  --color-field: rgba(255, 0, 0, 0.123);
  --color-label: rgba(0, 255, 42, 0.123);
  --color-input: rgba(0, 4, 255, 0.123);
}

/* Remove the code below to restore colors */
:root { --color-form: transparent; --color-field: transparent; --color-label: transparent; --color-input: transparent; }

body {
  display: flex;
  flex-direction: column;
}

.body--centered {
  align-items: center;
}

.form {
  display: flex;
  flex-direction: column;
  background-color: var(--color-form);
}

.form__submit {
  align-self: flex-end;
}

.field {
  display: flex;
  align-items: center;
  background-color: var(--color-field);
  margin: 0.2em 0px;
}

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

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

.select {

}

.select__option {

}

.radio {

}

/* With this setting all the options are lined horizontally */
.radio--inline {
  display: flex;
}

.radio--inline .radio__option {
  flex: none;
}

.radio--inline .radio__label {
  flex: 1;
}

.radio--grid {
  display: grid;
  grid-template-columns: auto auto;
  justify-content: start;
}

.radio--grid .radio__option {
  grid-column: 1;
}

.radio--grid .radio__label {
  grid-column: 2;
}