Lots of whitespace between my inputs for the Survey Form project

Code Feedback
1

I have the following codepen: https://codepen.io/chase-hippen/pen/bKRQBr?editors=1100 and there is lots of whitespace between my input fields and I can’t figure out why. Any chance someone could take a look and tell me?

2

Also, my radio and checkbox buttons when I put values start to skew their alignment. What did I do wrong there?

3

I just figured out setting my row width to auto instead of 1fr fixed the whitespace issue, but the radios and checkboxes are still all weird.

4

Now I got them all aligned to the left because I had nothing telling the text to align left for inputs, but now the text is all appearing under the buttons instead of next to the buttons

5

The problem is your input’s display style is set to block which is forcing everything to appear on a separate line.
Try putting each input section for each radio button into its own grouping (like a span or a div) then style that instead. Not sure if I’m being clear …

6

This lead me to the answer. I ended up wrapping each option in it’s own label tag and keeping the display block for label. This made them all fit nice and snug together. Much appreciated!