Survey problem styling the labels & input

Hi there, I’m having some issues with styling the two columns (labels & input). Here is my codepen:

I chose to not stick to the example HTML structure as I think it’s quite confusing, but I can see why it’s done.

Any one that could help me in the right direction? Thanks!

How should label and input look like? What did you try already?

Hi, thanks for your response!
Should look something like the example here: https://codepen.io/freeCodeCamp/pen/VPaoNP?editors=1000 , labels on one side with the input/radio buttons on the other side…

I messed around a bit with grid and came to this: https://codepen.io/robinlutterveld/pen/BvrjLg
Which is a bit more like I want it, just not sure about how I implemented it…

Take a look at flexbox. I made a minimal working example for you: https://output.jsbin.com/sisuceculi/

For your sizing problem, flex-grow is probably what you should take a look at.
Here is a simple example:

2 Likes

Yes I believe Flexbox is the styling solution you are wanting to emulate.

I’d like to point out that if you wrap your labels over your inputs, when you click a label it will toggle the input. A better user experience overall. And the example that you quoted also uses this.

As an example

 <label for='firstLabel'>
  I'm a label
  <input type='button' />
  </label>

When you do that you’ll see you can toggle the button or checkbox input by clicking on the label.

1 Like

Thanks, the label over the input tip is very helpful! :slight_smile:

Now struggling with flexbox haha

Updated the survey thanks to @IzzleNizzle 's tip of wrapping labels over inputs and @minthemiddle 's tip of using Flexbox : https://codepen.io/robinlutterveld/pen/maxPNm

All feedback & criticism is welcome :slight_smile: Thanks!