<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: .5em;
  line-height: 1.5;
  margin-bottom: 1.25em;
  user-select: none;
  vertical-align: top;
  width: max-content;

  &__help {
    font-size: max(.75em, .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;
    }
  }
}