Embed a search form in Bootstrap 3 panel heading

Question

I'm attempting to embed a search form at the right side of a panel heading:

  <div class="panel-heading">
    <h3 class="panel-title">Results <span class="badge">6</span></h3>

  <form class="form-inline pull-right" role="search" method="get" action="/tbl">
    <div class="form-group">
      <input type="text" name="criteria" class="form-control" value="<%= params[:criteria] if params[:criteria] %>" placeholder="<%= params[:criteria]? params[:criteria] : 'Enter search criteria (e.g. FOOBAR_%)' %>">
      <div class="input-group-btn">
        <button class="btn btn-primary"><i class="glyphicon glyphicon-search"></i></button>
      </div>
    </div>
  </form>

  </div>

Unfortunately, I'm having alignment issues:

In Safari (8.0.3):

In Firefox (35.0.1):

Is there a way to do this, preferably without custom CSS?

JSFiddle

Answer 1

Almost, see this fiddle

I put the heading and search box into col divs, but id have to add a little padding to he title to get it to line up with the search box

CSS:

.padFix{
    padding-top:8px;
}

HTML:

  <div class="panel-heading ">
      <div class="row">
          <div class="col-sm-6">
              <h3 class="panel-title padFix">Results <span class="badge">6</span></h3></div>
              <div class="col-sm-6">
                  <form role="search" method="get" action="/tbl">
                    <div class="input-group">
                       <input type="text" name="criteria" class="form-control" value="<%= params[:criteria] if params[:criteria] %>" placeholder="<%= params[:criteria]? params[:criteria] : 'Enter search criteria (e.g. FOOBAR_%)' %>">
                       <div class="input-group-btn">
                          <button class="btn btn-primary"><i class="glyphicon glyphicon-search"></i></button>
                       </div>
                    </div>
                </form>
          </div>
      </div>
  </div>