Why is this appended bootstrap button misaligned?

Question

I'm trying to replicate this example. However I'm getting the following result:

My code (index.html.erb):

<%= form_tag "/search", method: "post" do %>
    <div class="col-lg-6">
        <div class="input-group">
            <%= text_field_tag :txt, nil, placeholder: "Enter text", class: "form-control" %>
                    <span class="input-group-btn">
                            <%= submit_tag "Go", class: "btn btn-default" %>
                    </span>
            </div>
    </div>

Part of my Gemfile showing the relevant gems:

# Saas rails
gem 'sass-rails', '>= 3.2'
# Bootstrap
gem 'bootstrap-sass', '~> 3.3.6'
# Autoprefixer - Automatically adds the proper vendor prefixes to your CSS code when it is compiled (optional)
gem 'autoprefixer-rails'

Importing Bootstrap in app/assets/stylesheets/application.css.sass:

@import "bootstrap-sprockets"
@import "bootstrap"

Tried so far both in Chrome and Firefox.

Answer 1

Not sure if all of the following are needed but at least it works now!

<%= form_tag "/search", method: "post" do %>
   <div class="col-lg-6">
       <div class="input-group input-group-lg">
           <span class="input-group-btn input-group-lg">
               <%= text_field_tag :txt, nil, placeholder: "Enter text", class: "form-control" %>
           </span>
           <span class="input-group-btn input-group-lg">
               <%= submit_tag "Go", class: "btn btn-default" %>
           </span>
       </div>
    </div>
<% end %>

The accepted answer here helped.