Bootstrap 3.0 inline headings tags

Question

I have the following piece of code:

<div class="row">
    <div class="col-md-12">
        <div class="well">
            <div class="clearfix">
                <h2 class="pull-left">Heading</h2>
                <h4>Second Heading</h4>
           </div>
        </div>
     </div>
</div>

The goal is to have both the <h2> and the <h4> next to each other, on the same base line. At this point the <h4> element is way above the line.

I've tried to put this into spans, and other 'tricks' like vertical-align: bottom. For some reason I just simply cannot get this on the same line, and same 'line-height like this:

Heading Second Heading

Answer 1

Surprised its not been mentioned but another way would be to use the heading classes.

<span class="h2 pull-left">heading</span>
<span class="h4">second heading</span>

See the less file where they typography styles are applied, everything you need apart from the display:block