title: Bootstrap Align Checkbox <input> next to Header <h3>
body: <p>I'm trying to vertically align a bootstrap checkbox &amp; label with a header element. I also want the checkbox &amp; label to be at the far right of the shared grid row.</p>
  
  <p><strong>HTML:</strong>
  </p>
  
  <pre><code>&lt;div class="container"&gt;
    &lt;div class="row"&gt;
      &lt;div class="col-md-4"&gt;
          &lt;div class="form-inline"&gt;
               &lt;h3&gt;Chat Room&lt;/h3&gt;
  
              &lt;label class="checkbox-inline"&gt;
                  &lt;input type="checkbox" checked&gt; &lt;small&gt;enable presence events&lt;/small&gt;
              &lt;/label&gt;
          &lt;/div&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>
  </p>
  
  <p><strong>CSS:</strong>
  </p>
  
  <pre><code>.form-inline h3 {
      display: inline-block;
  }
  
  label.checkbox-inline {
      float: right;
  }
  </code></pre>
  
  <p><a href="https://jsfiddle.net/zenwoof/7e1f47rz/7/" rel="nofollow noreferrer">https://jsfiddle.net/zenwoof/7e1f47rz/7/</a></p>
  
  <p>Results in:</p>
  
  <p><a href="https://i.stack.imgur.com/BJOll.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/BJOll.png" alt="enter image description here"></a></p>
  
  <p>I'm hoping there's a clean &amp; responsive way to do this, other than a hacky margin/padding fix.</p>
  
  <p>Thanks!</p>