Как сделать так, чтобы все мои радио / чекбокс выстраивались в линию?

Question

Я хочу сделать все мое радио в #frequent и установить флажок в #player по прямой линии, как я сделал в #gender, но без необходимости указывать каждый ярлык и вводить отдельный div.Как я могу это сделать?

Мой codepen и часть моего кода:

В #gender:

  <div id="gender">
        <div class="gm">
        <label for="male"> Male  </label>
    <input type="radio" id="male" name="gender" class="rad" >
        </div>
<div class="gf">
        <label for="female"> Female </label>
    <input type="radio" id="female" name="gender" class="rad" >
  </div>

И, например,

 <div id="frequent">
        <legend> How Frequent Do You Listen To Music </legend>
        <label for="aday">All day 
    <input type="radio" id="aday" name="frequent" class="rad">
   </label>

        <label for="eday">Every day
    <input type="radio" id="eday" name="frequent" class="rad">
   </label>
        <label for="oday">Every other day
    <input type="radio" id="oday" name="frequent" class="rad">
   </label>
        <label for="party">I'm a party person
    <input type="radio" id="party" name="frequent" class="rad">
   </label>
      </div>

Answer 1

Оберните текст в метку в промежуток, а затем используйте следующую CSS

HTML

<label for="saxophone">  <span>Saxophone </span>
  <input type="checkbox" id="saxophone" class="chk">
</label>

CSS

label > span {
    min-width: 150px;
    display: inline-block;
}

Answer 2

Вы должны указать следующие стили, тогда они будут точно такими же, как и пол

#frequent label {
    width: 50%;
    display: flex;
    justify-content: space-between;
}

#player label {
    display: flex;
    justify-content: space-between;
    width: 50%;
}

#player input[type="checkbox"] {
    margin-right: 0;
}

#player input {
    flex: none;
}

, вы также можете проверить codepen