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.