Bootstrap Align Checkbox next to Header

I'm trying to vertically align a bootstrap checkbox & label with a header element. I also want the checkbox & label to be at the far right of the shared grid row.

HTML:

<div class="container">
  <div class="row">
    <div class="col-md-4">
        <div class="form-inline">
             <h3>Chat Room</h3>

            <label class="checkbox-inline">
                <input type="checkbox" checked> <small>enable presence events</small>
            </label>
        </div>
    </div>
</div>

CSS:

.form-inline h3 {
    display: inline-block;
}

label.checkbox-inline {
    float: right;
}

http://ift.tt/1MCjtyx

Results in:

I'm hoping there's a clean & responsive way to do this, other than a hacky margin/padding fix.

Thanks!