Bootstrap Panel-Header with Buttons on right side

by sqiudward

HTML

<link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css">
<script src="//netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="//netdna.bootstrapcdn.com/font-awesome/3.2.1/css/font-awesome.min.css">
<div class="panel panel-default">
    <div class="panel-heading">
         <h3 class="panel-title pull-left">
With short text it works great!
            </h3>

        <button class="btn btn-default pull-right">New</button>
        <div class="clearfix"></div>
    </div>
    <div class="panel-body">Panel content</div>
</div>
<div class="panel panel-default">
    <div class="panel-heading">
         <h3 class="panel-title pull-left">
But with long text, the button is lower: Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum.

        </h3>

        <button class="btn btn-default pull-right">New</button>
        <div class="clearfix"></div>
    </div>
    <div class="panel-body">Panel content</div>
</div>

CSS

.panel-heading h3 {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    line-height: normal;
    width: 75%;
    padding-top: 8px;
}