title: How can i line up a group of buttons next to a bootstrap 3 panel title using CSS?
body: <p>I'm trying to learn some bootstrap 3, and i'm trying to add a group of two buttons to a panel heading for those <a href="http://getbootstrap.com/javascript/" rel="nofollow">Collapse-Accordion's</a>.
  I want to be able to line the title of the panel to the left, and the <code>btn-group</code> lined to the right. </p>
  
  <p>I have tried to add <code>pull-left</code> for the title, and <code>pull-right</code> for the button group, but this will not result in something pretty...</p>
  
  <p>Adding for example: <code>style="margin-left:200px;"</code> to the <code>&lt;span&gt;</code>, will work, but when i add more panels, with different names, there will be another number of px for that margin...</p>
  
  <p>Here is a link to my <a href="http://jsfiddle.net/q8br8/6/" rel="nofollow">JSfiddle.</a></p>
  
  <p>Where i go wrong is probably somewhere here: Not sure if i can use the <code>&lt;span&gt;</code> within the <code>&lt;h4&gt;</code>, and for this purpose of mine?</p>
  
  <pre><code>&lt;div class="panel-heading"&gt;
    &lt;h4 class="panel-title"&gt;
       &lt;a data-toggle="collapse" data-parent="#accordion" href="#collapseOne"&gt;
             Click me...
       &lt;/a&gt;
       &lt;span class="btn-group"&gt; 
          &lt;button class="btn btn-default"&gt;ON&lt;/button&gt;
          &lt;button class="btn btn-primary active"&gt;OFF&lt;/button&gt;
      &lt;/span&gt;
    &lt;/h4&gt;
   &lt;/div&gt;
  </code></pre>