Bootstrap Button and input box , side by side - html

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>

Answer 2

for the cross-browser you can simple use inline-block
.btn,.form-control{display: inline-block; width: auto;}