Bootstrap Button and input box , side by side

Question

Can anybody please advise/correct me how to align or arrange the button and input box side by side without grouping in bootstrap.

I had searched few examples in the internet which are only in grouping of elements.

jsfiddle: https://jsfiddle.net/erama035/p9dagmL3/3/

<div class="container">
    <div class="row">

       <div class="col-xs-5 col-sm-5 col-md-5">
            <button class="btn btn-default col-sm-2 col-md-2">add</button>
            <input  class="form-control col-md-3 col-sm-2"/>
       </div>

       <div class="col-xs-7 col-sm-7 col-md-7">
            <button class="btn btn-default col-md-2">remove</button>
            <input  class="form-control col-md-5"/>
       </div>

   </div>  
 </div>

Answer 1

The quick way would be, to simply use Flexbox for the parent <div>. This converts the child elements to flex items, which are arranged side by side by default.

.container > .row > div {
  display: flex;
}

The proper way would be to use Bootstraps predefined classes for grouping.

.container>.row>div {
  display: flex;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="https://netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script>

<div class="container">
  <div class="row">
    <div class="col-xs-5 col-sm-5 col-md-5">
      <button class="btn btn-default">add</button>
      <input class="form-control" />
    </div>
    <div class="col-xs-7 col-sm-7 col-md-7">
      <button class="btn btn-default">remove</button>
      <input class="form-control" />
    </div>
  </div>
</div>