<label class="field">
  Text field:
  <input class="input" type="text" placeholder="Text" />
  <div class="field__help">Coaching Text</div>
</label>

<label class="field">Email: <input class="input" type="email" placeholder="person@internet.tld" /></label>

<h5>-inline</h5>

<label class="field -inline"><input class="checkbox" type="checkbox" /> Checkbox</label>

<label class="field -inline"><input class="radio" type="radio" /> Radio</label>

<label class="field -inline">
  Text field:
  <input class="input" type="text" placeholder="Text" />
  <div class="field__help">Coaching Text</div>
</label>

<label class="field -inline">Email: <input class="input" type="email" placeholder="person@internet.tld" /></label>

<h5>-reversed</h5>

<label class="field -reversed">
  <input class="checkbox" type="checkbox" /> Checkbox
  <div class="field__help">Dolor architecto facere!</div>
</label>

<label class="field -reversed"><input class="radio" type="radio" /> Radio</label>

.field {
  $b: &;

  display: grid;
  gap: 0.5em;
  line-height: 1.5;
  margin-bottom: 1.25em;
  user-select: none;
  vertical-align: top;
  width: max-content;

  &__help {
    font-size: max(0.75em, 0.75rem);
    color: var(--color-gray-600);
  }

  &:has(input:not(:disabled)) {
    cursor: pointer;
  }

  &.-inline {
    grid: auto / auto auto;
    align-items: center;

    #{$b}__help {
      grid-column: 2;
    }
  }

  &.-wide {
    width: 100%;
  }

  &.-stacked {
    grid-auto-flow: column;
  }

  &.-reversed {
    grid-auto-flow: row dense;

    input,
    #{$b}__input {
      grid-column: 2;
    }
  }
}