title: HTML/CSS aligning two inputs and text underneath
body: <p>I am trying to place two input forms next to eachother and position some text underneath them. Somehow it never ends up aligned correctly. This picture shows what I am trying to do:</p>
  
  <p><img src="https://i.stack.imgur.com/SM91j.jpg" alt="Example picture"></p>
  
  <p>HTML:</p>
  
  <pre><code>&lt;form action="#" class="cleanForm" method="POST"&gt;
      &lt;fieldset&gt;
          &lt;input type="text" name="firstname" placeholder="first name" required&gt;
          &lt;em&gt;Please enter your first name&lt;/em&gt;
  
          &lt;input type="text" name="lastname" placeholder="last name" required&gt;
          &lt;em&gt;Enter your last name&lt;/em&gt;
  
          &lt;input type="email" name="email"  placeholder="e-mail" required&gt;
          &lt;em&gt;Enter your e-mail address&lt;/em&gt;
  
          &lt;input type="email" name="email2" placeholder="re-enter e-mail" required&gt;
          &lt;em&gt;Re-enter your e-mail address&lt;/em&gt;
  
          &lt;input type="password" name="password" placeholder="password" required&gt;
          &lt;em&gt;Enter a password between 8 and 20 digits&lt;/em&gt;
  
          &lt;input type="password" name="password2" placeholder="re-enter password" required /&gt;
          &lt;em&gt;Re-enter the password&lt;/em&gt;
  
          &lt;p&gt;
              &lt;input type="radio" name="gender" value="Female" checked&gt;
              &lt;label for="female"&gt;Female&lt;/label&gt;
  
              &lt;input type="radio" name="gender" value="Male"&gt;
              &lt;label for="male"&gt;Male&lt;/label&gt;
          &lt;/p&gt;
  
          &lt;p&gt;
              &lt;input type="checkbox" id="agree-TOS"&gt;
              &lt;label for="agree-TOS"&gt;I have read and agree to the &lt;a href="#"&gt;Terms of Service&lt;/a&gt;.&lt;/label&gt;
          &lt;/p&gt;
  
          &lt;input type="submit" value="Create account"&gt;
      &lt;/fieldset&gt;
  &lt;/form&gt;
  </code></pre>
  
  <p>CSS:</p>
  
  <pre><code>form.cleanForm {
      width:700px;
      margin:0 auto;
  }
  
  form.cleanForm p {
      margin-bottom:15px;
  }
  
  input[type="email"], input[type="password"], input[type="text"]  {
      font-family: Arial, Sans-Serif;
      font-size: 18px;
      color: #adadad;
      padding: 10px;
      outline:none;   
      float:left;
      border: solid 1px #adadad;
      width: 230px;
      transition: all 2s ease-in-out;
      -webkit-transition: all 2s ease-in-out;
      -moz-transition: all 2s ease-in-out;
      -moz-border-radius: 8px;
      -webkit-border-radius: 8px;
      border-radius: 8px;
      -moz-box-shadow:inset 0 0 5px 5px #E6E6E6;
      -webkit-box-shadow:inset 0 0 5px 5px #E6E6E6;
      box-shadow:inset 0 0 5px 5px #E6E6E6;
      clear: right;
  }
  
  input[type="email"]:focus, input[type="email"]:hover, input[type="password"]:focus,
  input[type="password"]:hover, input[type="text"]:focus, input[type="text"]:hover {
      border:1px solid #FF003F;   
  } 
  form.cleanForm em {
      font-size:12px;
  }
  </code></pre>