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?
Also, my radio and checkbox buttons when I put values start to skew their alignment. What did I do wrong there?
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.
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
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 …
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!