title: Bootstrap: Use .pull-right without having to hardcode a negative margin-top
body: <p>This is my code (please see fiddle <a href="http://jsfiddle.net/SyjjW/">here</a>):</p>
  
  <pre><code>&lt;div class='container'&gt;
      &lt;div class='hero-unit'&gt;
          &lt;h2&gt;Welcome&lt;/h2&gt;
  
          &lt;p&gt;Please log in&lt;/p&gt;
          &lt;div id='login-box' class='pull-right control-group'&gt;
              &lt;div class='clearfix'&gt;
                  &lt;input type='text' placeholder='Username' /&gt;
              &lt;/div&gt;
              &lt;div class='clearfix'&gt;
                  &lt;input type='password' placeholder='Password' /&gt;
              &lt;/div&gt;
              &lt;button type='button' class='btn btn-primary'&gt;Log in&lt;/button&gt;
          &lt;/div&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>I want <code>#login-box</code> to have <code>.pull-right</code> and be at the same height as the <code>p</code>. I can use <code>margin-top: -100px</code> but that feels wrong.</p>
  
  <p>How can I have <code>#login-box</code> at the same height as the <code>p</code> without hardcoding a negative <code>margin-top</code>?</p>