Horizontal Bootstrap Panel

Question

I've been trying to adapt a Bootstrap panel to implement a horizontal version but I'm having trouble getting the panel heading to vertically align with the content in the panel body — I'm assuming it's something to do with clearing the divs.

It's safe to say that front-end dev isn't exactly my forté. I'm sure this is perfectly simple to accomplish but it's currently beating me!

Here's my mark-up:

<div class="panel panel-default panel-horizontal">
    <div class="panel-body">
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Neque, deserunt, aliquam, inventore commodi at placeat blanditiis quaerat quo fuga molestias ex quos debitis quidem dolor fugit aspernatur iste iusto quibusdam.</p>
    </div>
    <div class="panel-heading">
        <p>Example</p>
    </div>
</div>

And the accompanying CSS:

.panel-horizontal .panel-heading {
    border-bottom: 0;
    border-right: 1px solid transparent;
    border-top-right-radius: 0;
    margin-bottom: 0;
    width: 150px;
}

.panel-horizontal .panel-body {
    float: right;
    margin: 0 0 15px 150px;
    padding-bottom: 0;
}

What am I missing?

Answer 1

EDIT

I made a fully functional panel-horizontal with display: table instead. It's pretty solid: http://jsfiddle.net/seydoggy/9jv5e8d1/

Original message

I know this is an old one, but I was searching for a similar solution and came upon your fiddle. I've just wrapped some panel pretty around columns and come up with this: http://jsfiddle.net/qy96nh5L/

#wrap {
    padding: 2em;
}
.panel-horizontal {
    background-color: #f5f5f5;
    border: 1px solid #ddd;
    border-radius: 4px;
}
.panel-horizontal > .panel-body {
    background-color: white;
    border-radius: 0 4px 4px 0;
    border-left: 1px solid #ddd;
}

<div id="wrap">
<div class="row panel panel-horizontal">
    <div class="col-xs-3">
        <div class="panel-heading">Example</div>
    </div>
    <div class="col-xs-9 panel-body white">
            Lorem ipsum dolor sit amet, consectetur adipisicing elit. Neque, deserunt, aliquam, inventore commodi at placeat blanditiis quaerat quo fuga molestias ex quos debitis quidem dolor fugit aspernatur iste iusto quibusdam.
    </div>
</div>