title: Embed a search form in Bootstrap 3 panel heading
body: <p>I'm attempting to embed a search form at the right side of a panel heading:</p>
  
  <pre><code>  &lt;div class="panel-heading"&gt;
      &lt;h3 class="panel-title"&gt;Results &lt;span class="badge"&gt;6&lt;/span&gt;&lt;/h3&gt;
  
    &lt;form class="form-inline pull-right" role="search" method="get" action="/tbl"&gt;
      &lt;div class="form-group"&gt;
        &lt;input type="text" name="criteria" class="form-control" value="&lt;%= params[:criteria] if params[:criteria] %&gt;" placeholder="&lt;%= params[:criteria]? params[:criteria] : 'Enter search criteria (e.g. FOOBAR_%)' %&gt;"&gt;
        &lt;div class="input-group-btn"&gt;
          &lt;button class="btn btn-primary"&gt;&lt;i class="glyphicon glyphicon-search"&gt;&lt;/i&gt;&lt;/button&gt;
        &lt;/div&gt;
      &lt;/div&gt;
    &lt;/form&gt;
  
    &lt;/div&gt;
  </code></pre>
  
  <p>Unfortunately, I'm having alignment issues:</p>
  
  <p>In Safari (8.0.3):</p>
  
  <p><img src="https://i.stack.imgur.com/qYYqz.png" alt="enter image description here"></p>
  
  <p>In Firefox (35.0.1):</p>
  
  <p><img src="https://i.stack.imgur.com/1ie49.png" alt="enter image description here"></p>
  
  <p>Is there a way to do this, preferably without custom CSS?</p>
  
  <p><a href="http://jsfiddle.net/jbodbo8c/" rel="nofollow noreferrer">JSFiddle</a></p>