Can't control my radio/checkbox margins the way I like - html

Question

I'v got 3 id's - #gender (radio), #frequent (also radio), #player (checkbox)
I want to make my space between my inputs to my labels to be 16px (for example)
I want to make my #frequent and #player id's to go into two lines.
I'v tried to give to my #gender 20% width to the label and 80% to the input (and I'v played around it) and nothing.
And the #frequent act like a column all though I'v tried to give it flex-direction: row;
This is my Codepen and part of my code:
for the gender,
<div id="gender">
<label for="male"> Male </label>
<input type="radio" id="male" name="gender" />
<label for="female"> Female </label>
<input type="radio" id="female" name="gender" />
</div>
and
#gender{
display: flex;
flex-direction: row;
}
#gender label {
width: 20%;
}
#gender input[type="radio"]{
width: 80%;
}
For the frequent,
<div id="frequent">
<legend> How Frequent Do You Listen To Music </legend>
<label for="aday">All day </label>
<input type="radio" id="aday" name="frequent"/>
<label for="eday">Every day</label>
<input type="radio" id="eday" name="frequent"/>
<label for="oday">Every other day</label>
<input type="radio" id="oday" name="frequent"/>
<label for="party">I'm a party person</label>
<input type="radio" id="party" name="frequent"/>
</div>
And
#frequent {
display: flex;
}
#frequent legend {
margin-bottom: 24px;
}
#frequent label {
width: 20%;
}
#frequent input[type="radio"]{
width: 80%;
}