title: Aligning html input and submit
body: <p>I am having a ridiculous problem where my input text field and submit buttons are not lining up and I really can't figure out an elegant solution of how to fix it. As you can see in the image below, the input text field (labeled "Enter Keywords" in the upper right") is 2px higher than the "Search" submit button:</p>
  
  <p><img src="https://i.stack.imgur.com/NRFk5.png" alt="Input field is 2px above submit button"></p>
  
  <p>Here is the HTML:</p>
  
  <pre><code>&lt;div id="search"&gt;
      &lt;form action="#" method="POST" id="search_form"&gt;
          &lt;div id="search_inputs"&gt;
              &lt;input type="text" placeholder="Enter Keywords" name="keywords" /&gt;
              &lt;input class="button" type="submit" name="search" value="SEARCH" /&gt;
          &lt;/div&gt;
      &lt;/form&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>Here is the css code:</p>
  
  <pre><code>#search_form .button {
      background: black;
      color: white;
      padding: 3px 15px;
      border: none;
      font-size: 7pt;
      height: 18px;
  }
  
  #search_form input[name="keywords"] {
      width: 175px;
  }
  
  #search {
      margin-top: 7px;
      float: right;
  }
  </code></pre>
  
  <p>I'm pretty sure setting the font-size to 7pt is messing it up, but I'm not sure why and I don't know how to deal with this because that's the font size of my other buttons in the area.</p>
  
  <p>Thanks for any help!</p>