Getting labels to line up under a textboxes

#1

I am working on a little project which involves me to work on my CSS skills (which are very poor). I have created a JSFiddle here to display what I have so far. Basically, I want the bottom form (#2) to look like the top form (#1), with the colon in the correct location and the labels to be underneath each textbox with a small gap between the two. Also, I do not want that large gap between the textboxes and the button at the bottom of the form.

I have tried several approaches which get me closer to the the labels lining up the way I want, but the colon and the gap remain. Any hints or advice would be greatly appreciated. The CSS I have for the inputs and the labels was modified from something similar to what I wanted which I found on StackOverflow.

#2

I tried moving the “Header” out of the <span> and changed it to a flex <div>. I also made the labels vertical flex boxes and switched the order of the label text and the <input>. Then a few margin adjustments.

https://codepen.io/anon/pen/zpvzwz?editors=1100

1 Like
#3

I had not thought of using flexbox, but that is a great idea. Thanks for the example.

#4