How to play in the flexbox's garden?

Hi there,

I’m in my second project “Survey form” and I’m trying to do it with flexbox, just to get the hang of it.

I wanted my ‘p’ to be align to center
and the “#fname label” to get like 1/3 of the space and the “#fname input” 2/3
and the next row (email) the same.

Right now everything is scrambled…

This is my pen: https://codepen.io/nadav-himmelfarb/pen/BxVYzv

Click the “Flexbox” item in the navbar.

I look at your link and still don’t understand where I missed what.
What did I missed?
Isn’t the parent give the display: flex to his children? and when I give like- flex: 100px;
it suppose to get it because he’s inherit the display: flex already ?

Or something …