title: Aligning fonts in label
body: <p>Is there any way to alter the text property inside <code>label</code> so that it touches the baseline?  In the example, both State and City are above the baseline.</p>
  
  <p><a href="http://jsfiddle.net/6VzLR/" rel="nofollow noreferrer">http://jsfiddle.net/6VzLR/</a></p>
  
  <p><strong>HTML:</strong></p>
  
  <pre><code>&lt;div id="leftContent"&gt;
      &lt;div id="state"&gt;
          &lt;label for="state"&gt;State:&lt;/label&gt;
          &lt;select name="state"&gt;
              &lt;option&gt;State - Karnataka&lt;/option&gt;
          &lt;/select&gt;
      &lt;/div&gt;
      &lt;div id="city"&gt;
          &lt;label for="city"&gt;City:&lt;/label&gt;
          &lt;select name="city"&gt;
              &lt;option&gt;City - Bangalore&lt;/option&gt;
          &lt;/select&gt;
      &lt;/div&gt;
  &lt;/div&gt;&lt;!--leftContent--&gt;
  </code></pre>
  
  <p><strong>CSS:</strong></p>
  
  <pre><code>#state label, #city label{
      width:40%;
      display:inline-block;
      margin: 3px 0 3px 6px;
  }
  </code></pre>
  
  <p><img src="https://i.stack.imgur.com/DCzra.png" alt="State - Dropdown"></p>