title: Align two input groups with different widths next to each other
body: <p>I want to align 2 input groups, one with span 8 &amp; other with 4 next to each other. I used form inline but it doesn't take the intended width.</p>
  
  <pre><code>&lt;div class="form-inline"&gt;
      &lt;div class="form-group"&gt;
          &lt;!-- &lt;div class="input-group"&gt; --&gt;
            &lt;input type="text" class="form-control col-sm-8" placeholder="Username"&gt;
          &lt;!-- &lt;/div&gt; --&gt;
      &lt;/div&gt;
      &lt;div class="form-group"&gt;
          &lt;!-- &lt;div class="input-group"&gt; --&gt;
            &lt;input type="text" class="form-control col-sm-4" placeholder="Ref No."&gt;
      &lt;/div&gt;
  &lt;/div&gt; 
  </code></pre>