Survey form: make radio buttons and checkboxes align vertically

My project’s codepen:

I want to arrange my radio buttons and checkboxes so that they place on top of each other, in a vertical line. Like they do in the example project:

I made the other elements arrange, so that labels took one line and input boxes the next line by setting input { width: 100%; }, but to make the radio buttons and checkboxes arrange so that label is next to radio button/checkbox, I set .input-radio, .input-checkbox { width: auto; }.

So, I basically want my elements to arrange the same way the FCC example’s elements arrange. Something tells me I need to do it in a different way than setting width: 100%, which would probably also be smoother functionally, but does anyone have a solution?

I fixed my problem by using

display: flex;
flex-direction: column;

This topic was automatically closed 182 days after the last reply. New replies are no longer allowed.