Radio Buttons side by side

Question

Hi I have made a couple of radio buttons and want them side by side.

 .gender-buttons{ margin-bottom: 6rem; }.gender-buttons input[type = "radio"]{ opacity: 0%; position: fixed; width: 0%; }.gender-buttons label{ display: inline-block; grid-template-columns: 1fr 1fr; padding: 20px; font-family: 'Nunito', sans-serif; font-size: 16px; border: 2px solid black; border-radius: 4px; }

 <div class="main-container"> <div class="viewport"> <div class="gender-buttons" id="gender-buttons"> <input type="radio" id="male" name="gender" value="male"> <label for="male">Male</label><br> <input type="radio" id="female" name="gender" value="female"> <label for="female">Female</label><br> </div> </div> </div>

I want both Male and Female buttons to be side by side [MALE] [FEMALE] and be the selection when clicked on (as you can I see I removed the regular radio buttons) But for some reason they are stacked on TOP of eachother. I've tried messing around like playing with rows and flexbox but nothing seems to be getting them to be side by side to eachother.

Answer 1

You have to use display: inline-block; so they can fit all on one line.
float: left; would be also a possebility.

Answer 2

First of all, to make the HTML cleaner, I suggest that you put each input with their respective label inside a div container.

Next step would be to apply styling on the .gender-buttons class, which is the parent of the radio buttons.

You have two options here, using display: inline-block , but personally I would recommend using display: flex , since it will give a lot more flexibility when it comes to arranging the radio buttons. You could also add flex-wrap: wrap , which will make your radio buttons flow with the browser size, and they will automatically span on as many rows as needed for them to be displayed.