Stacked Tabs in Bootstrap 3 Row issue

Question

I've create Stacked Tabs using the custom CSS given in the answer (with more votes) of this SO question. Tabs works fine, but I can not manage to add two rows which the top row has two text inputs and the bottom row has one button. With my CSS code, second row comes outside of the tab panel. How can I fix this?

bootply Demo

HTML Code

<div class="container">
    <div class="row">
        <div class="col-lg-12">
            <h3>
                Tabs -left</h3>
            <div class="tabbable tabs-left">
                <ul class="nav nav-tabs">
                    <li><a href="#a" data-toggle="tab">One</a></li>
                    <li><a href="#b" data-toggle="tab">Two</a></li>
                    <li><a href="#c" data-toggle="tab">Twee</a></li>
                </ul>
                <div class="tab-content">
                    <div class="tab-pane active" id="a">
                        <div class="row">
                            <div class="col-md-4">
                                <input type="text" class="form-control input-sm" placeholder="Small">
                            </div>
                            <div class="col-md-4">
                                <input type="text" class="form-control input-sm" placeholder="Small">
                            </div>
                        </div>
                        <div class="row">
                            <div class="col-md-4">
                                <button class="btn">
                                    Large</button>
                            </div>
                        </div>
                    </div>
                    <div class="tab-pane" id="b">
                        Tab Two
                    </div>
                    <div class="tab-pane" id="c">
                        Tab Three
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

Custom CSS (from the SO question)

.tabs-below > .nav-tabs,
.tabs-right > .nav-tabs,
.tabs-left > .nav-tabs {
  border-bottom: 0;
}

.tab-content > .tab-pane,
.pill-content > .pill-pane {
  display: none;
}

.tab-content > .active,
.pill-content > .active {
  display: block;
}

.tabs-below > .nav-tabs {
  border-top: 1px solid #ddd;
}

.tabs-below > .nav-tabs > li {
  margin-top: -1px;
  margin-bottom: 0;
}

.tabs-below > .nav-tabs > li > a {
  -webkit-border-radius: 0 0 4px 4px;
     -moz-border-radius: 0 0 4px 4px;
          border-radius: 0 0 4px 4px;
}

.tabs-below > .nav-tabs > li > a:hover,
.tabs-below > .nav-tabs > li > a:focus {
  border-top-color: #ddd;
  border-bottom-color: transparent;
}

.tabs-below > .nav-tabs > .active > a,
.tabs-below > .nav-tabs > .active > a:hover,
.tabs-below > .nav-tabs > .active > a:focus {
  border-color: transparent #ddd #ddd #ddd;
}

.tabs-left > .nav-tabs > li,
.tabs-right > .nav-tabs > li {
  float: none;
}

.tabs-left > .nav-tabs > li > a,
.tabs-right > .nav-tabs > li > a {
  min-width: 74px;
  margin-right: 0;
  margin-bottom: 3px;
}

.tabs-left > .nav-tabs {
  float: left;
  margin-right: 19px;
  border-right: 1px solid #ddd;
}

.tabs-left > .nav-tabs > li > a {
  margin-right: -1px;
  -webkit-border-radius: 4px 0 0 4px;
     -moz-border-radius: 4px 0 0 4px;
          border-radius: 4px 0 0 4px;
}

.tabs-left > .nav-tabs > li > a:hover,
.tabs-left > .nav-tabs > li > a:focus {
  border-color: #eeeeee #dddddd #eeeeee #eeeeee;
}

.tabs-left > .nav-tabs .active > a,
.tabs-left > .nav-tabs .active > a:hover,
.tabs-left > .nav-tabs .active > a:focus {
  border-color: #ddd transparent #ddd #ddd;
  *border-right-color: #ffffff;
}

.tabs-right > .nav-tabs {
  float: right;
  margin-left: 19px;
  border-left: 1px solid #ddd;
}

.tabs-right > .nav-tabs > li > a {
  margin-left: -1px;
  -webkit-border-radius: 0 4px 4px 0;
     -moz-border-radius: 0 4px 4px 0;
          border-radius: 0 4px 4px 0;
}

.tabs-right > .nav-tabs > li > a:hover,
.tabs-right > .nav-tabs > li > a:focus {
  border-color: #eeeeee #eeeeee #eeeeee #dddddd;
}

.tabs-right > .nav-tabs .active > a,
.tabs-right > .nav-tabs .active > a:hover,
.tabs-right > .nav-tabs .active > a:focus {
  border-color: #ddd #ddd #ddd transparent;
  *border-left-color: #ffffff;
}

Answer 1

Try to add overflow: hidden property for .tab-pane div

.tab-pane {
  overflow: hidden;
}

See example on http://bootply.com/91661