Styling row of divs and bootstrap input group

Question

I am trying to make a fixed search bar on the bottom of the page. I want the search bar (row) to be broken up into three sections - 1) the actual search input box, (2) the middle div which will be a display box and (3) a collapsing advanced menu.

My first issue is that my columns do not appear on the same row. I have them broken in sizes of 3, 6 and 3 at all screen sizes but the second div never appears next to the first one. You can see an example here: broken div I highlighted the divs with a white border for easier viewing. (This is also the case regardless of whether I have just the text input or the input with a button -which I chose to use later)

My second problem is that while trying to set the layout of the bar my search box wont come move into the correct position when I test it in Mozilla. It works in my fiddle test but this is not at all what it looks like in my browser. I have already tried many of the commonly given solutions but nothing has worked so far.

<div id="card-search-controls" class="row">
<div class="input-group col-md-3 col-sm-3 col-lg-3">
    <input type="text" id="searchbox" class="form-control" value="Search for..." ng-model="searchFilterInput" autofocus>
    <span class="input-group-btn"><button class="btn btn-default" type="button">+</button></span>
</div>
<div class="search-results col-md-6 col-sm-6 col-lg-6">TEST TEXT</div>
<div class="adv-menu col-md-3 col-sm-3 col-lg-3">####</div>
</div>

Edit to show the css

#card-search-controls{
height: 50px;
margin-left: 0px;
position: fixed;
bottom: 0;
right: 0;
left: 0;
background: rgba(6,25,51, 0.8);
z-index: 1;
display: flex;
}
.input-group{
  margin-top: 10px;
  margin-bottom: 10px;
  height: 20px;
  margin-left: 0px;
}

#card-search-controls div{
border: 1px solid white;
}

.search-results{
margin-top: 10px;
}

Answer 1

Please check this code..I have added the input-group into separate form tag and wrapped the input field.

<div class="container">
    <div id="card-search-controls" class="row">
    <div class="col-md-3 col-sm-3 col-lg-3 col-xs-3">
      <form class="input-group">
        <input type="text" id="searchbox" class="form-control" value="Search for..." ng-model="searchFilterInput" autofocus="" />       
      <span class="input-group-btn">
          <button class="btn btn-default" type="button">+</button>
        </span>
      </form>

    </div>
    <div class="search-results col-md-6 col-sm-6 col-lg-6 col-xs-6">TEST TEXT</div>
    <div class="adv-menu col-md-3 col-sm-3 col-lg-3 col-xs-3">######</div>
  </div>
</div>