Styling Form with Label above Inputs

Question

I would like to produce the following form style:

 Name                    Email [.................]     [.................]  Subject [.................]  Message [.........................................] [.........................................] [.........................................] [.........................................] 

The HTML code I have is:

<form name="message" method="post">     <section>     <label for="name">Name</label>     <input id="name" type="text" value="" name="name">     <label for="email">Email</label>     <input id="email" type="text" value="" name="email">     </section>     <section>     <label for="subject">Subject</label>     <input id="subject" type="text" value="" name="subject">     <label for="message">Message</label>     <input id="message" type="text" value="" name="message">     </section> </form> 

At the moment it is producing:

 Name    [...................] Email   [...................] Subject [...................] Message [.........................................] [.........................................] [.........................................] [.........................................] 

What would be the best way to do this? I keep getting in a muddle my floats!

Answer 1

I'd make both the input and label elements display: block , and then split the name label & input, and the email label & input into div's and float them next to each other.

input, label {      display:block;  }

<form name="message" method="post">      <section>      <div style="float:left;margin-right:20px;">      <label for="name">Name</label>      <input id="name" type="text" value="" name="name">    </div>      <div style="float:left;">      <label for="email">Email</label>      <input id="email" type="text" value="" name="email">    </div>      <br style="clear:both;" />        </section>        <section>        <label for="subject">Subject</label>      <input id="subject" type="text" value="" name="subject">      <label for="message">Message</label>      <input id="message" type="text" value="" name="message">        </section>  </form>

Answer 2

Probably a bit late but this worked for me. i simply used column flex-direction on the label and input elements HTML

<form id="survey-form">     <label for="name">Name</label>     <input type="text" id="name">          <label>Email</label>     <input type="email" id="email">   </form>  CSS  label,input{   display:flex;   flex-direction:column; }