title: html form - make inputs appear on the same line
body: <p>I am struggling to make two html form inputs (first and last name) appear on the same line side by side. I have tried using float, but that seems to make the rest of the inputs go everywhere. Any advise would be greatly appreciated - here is my code:</p>
  
  <p><strong>HTML:</strong></p>
  
  <pre class="lang-html prettyprint-override"><code>&lt;form action="includes/contact.php" method="post"&gt;
  
      &lt;label for="First_Name"&gt;First Name:&lt;/label&gt;
      &lt;input name="first_name" id="First_Name" type="text" /&gt;
      &lt;label for="Name"&gt;Last Name:&lt;/label&gt;
      &lt;input name="last_name" id="Last_Name" type="text" /&gt; 
  
      &lt;label for="Email"&gt;Email:&lt;/label&gt;
      &lt;input name="email" id="Email" type="email" /&gt;
  
      &lt;label for="Telephone"&gt;Telephone:&lt;/label&gt;
      &lt;input name="telephone" id="Telephone" type="tel" /&gt;
  
      &lt;label for="Wedding"&gt;Wedding Date:&lt;/label&gt;
      &lt;input name="wedding" id="Wedding" type="date" /&gt;
  
      &lt;label for="Requirements"&gt;Specific Requirements:&lt;/label&gt;
      &lt;textarea name="requirements" id="Requirements" maxlength="1000" cols="25" rows="6"&gt; &lt;/textarea&gt;
  
      &lt;input type="submit" value="Submit"/&gt;
  &lt;/form&gt; 
  </code></pre>
  
  <p><strong>CSS:</strong></p>
  
  <pre class="lang-css prettyprint-override"><code>#contactpage form {
    overflow: hidden;
    display: block;
  }
  
  #contactpage form label {
    margin-top:12px;
    font-size: 1.15em;
    color: #333333;
    font-family: 'Roboto Condensed', Helvetica, Arial, sans-serif;
    font-weight: normal;
    line-height: 1.2;
  }
  
  #contactpage form input {
    border: 1px solid #DDDDDD;
    box-shadow: none;
    -webkit-box-shadow: none;
    -moz-box-shadow: none;
    border-radius: 0px;
    -moz-border-radius: 0px;
    -khtml-border-radius: 0px;
    -webkit-border-radius: 0px;
  }
  
  #contactpage form input[type='text'] {
    width: 22%;
    display: inline!important;
    background: #F9F9F9;
    font-family: 'Helvetica Neue', Arial, Helvetica, sans-serif;
    font-size: 1.1em;
    line-height: 1.4;
    padding: 6px;
  }
  
  #contactpage form input[type='email'],
  #contactpage form input[type='tel'],
  #contactpage form input[type='date'],
  #contactpage form textarea {
    width: 94%;
    display: block;
    background: #F9F9F9;
    font-family: 'Helvetica Neue', Arial, Helvetica, sans-serif;
    font-size: 1.1em;
    line-height: 1.4;
    padding: 6px;
  }
  
  #contactpage form input[type='submit'] {    
    float:right;
    clear:both;
    display: block;
    background: #F9F9F9;
    color: #333333;
    font-size: 1.5em;
    font-family: 'Roboto Condensed', Helvetica, Arial, sans-serif;
    font-weight: 300;
    font-style: normal;
    text-transform: uppercase;
    text-decoration: none;
    line-height: 1.2;
    padding: 20px 20px 40px;
  }
  
  #contactpage form input[type='submit']:hover {
    color: #FFFFFF;
    background: #f1bdb5;
  }
  </code></pre>
  
  <p>Here is the <a href="http://jsbin.com/oCayInO/1/edit">JSBin Demo</a>.</p>