[CSS] Using inline-grid to gain easy control over gap and size

<div class="form-group">
  <label class="form-control radio">
    <span class="form-control__input radio__input">
      <input type="radio" name="radio" />
      <span class="input__control"> </span>
    </span>
    Radio
  </label>
</div>

 

.form-control {
    display: inline-grid;
    grid-template-columns: 1em 1fr;
    grid-gap: 0.5em;
  
    input {
      opacity: 0;
      width: 1em;
      height: 1em;
    }
  
    &__input {
      display: grid;
      grid-template-areas: "input";
      place-content: center;
      font-size: 1em;
  
      > * {
        grid-area: input;
      }
    }
  
    .input__control {
      width: 1em;
      height: 1em;
      border: 0.1em solid var(--color-default, color("default"));
    }
  }
  

 

Inside `form-control` are two element:

1. span element (1em)

2. Radio text (1fr)

inline-grid, put those two elements in one row and size. it is also to define 0.5em gap in between.