I'd like to know how to align horizontally like this

I was working on the second project which is to create a survey form and I was looking at different survey forms to get some ideas. I found this restaurant one and tried to replicate it using flexbox.

Link

I can’t for the life of me understand how they aligned the text on the left and the radio buttons on the right while also keeping them on the same height if that makes sense. Can someone give any advice on how they did this?

Hello~!

I recommend using your browser’s Developer Tools to view the HTML and CSS for those elements - you can look at the code to get a sense of how they accomplished the layout. It looks like they used float and position to achieve this, but I cannot be sure without some further digging.

2 Likes

hi @marios96

actually you can achieve that using flex,
here is my survey form example using flex

the diffrence is, i filled up both flex side by side with radio, while you want left only for text question, and the right side for radio buttons.

the basic came from examples here (scroll down to example section) and the last example demo.

regards

Yeah, seems like I have to get into the habit of reading code. It’s still kinda hard to understand code other people wrote but I’m slowly getting used to it, I’ve been reading some more pens trying to understand how other people structure their code. Thank you for your answer!

Very interesting. I like your projects a lot. Definitely got some ideas from this. Thank you for your answer!

1 Like