div is not properly aligned - css

Question

I have a div with class = "row". In that div, I am trying to align two divs in same row. But somehow, its not working.
Here's the html code
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<div class = "row">
<div class = "col-md-8 col-sm-8 col-xs-8" style="width: 50%;" class="alert alert-danger" ng-if="offlineRouterCnt!=0">
<strong>Number of offline Routers : {{offlineRouterCnt}} </strong>
</div>
<div class="input-group col-md-4 col-sm-4 col-xs-4" style = "width : 27%">
<div class="input-group-btn">
<button type="button" class="btn btn-primary" aria-haspopup="true" aria-expanded="false">ALL</button>
</div>
<input ng-model="naviagtion.searchText" class="form-control" focus-dir placeholder="Search Routers here"></input>
<span class="input-group-addon" ng-click="clearSearchAndFilters();">
<span class="fa fa-times fa-1x"></span>
</span>
</div>
</div>
Can someone help me how to do align them in same row?

Answer 1

Why are you specifying col-md-4, col-sm-4 and col-xs-4. Bootstrap scales, so you should only need to enter col-xs-4 & col-xs-8.
I think the browser is getting confused on which one is being declared and stacking them, rather than scaling.

Answer 2

Your code is working with Firefox 10.3 (macOS High Sierra). But I guess that some browsers could have conflicts with your custom inline width style. Try to remove it..the width of floated elements was set from the bootstrap classes.
So the final code could be:
<div class = "row">
<div class = "col-md-8 col-sm-8 col-xs-8" class="alert alert-danger" ng-if="offlineRouterCnt!=0">
<strong>Number of offline Routers : {{offlineRouterCnt}} </strong>
</div>
<div class="input-group col-md-4 col-sm-4 col-xs-4">
<div class="input-group-btn">
<button type="button" class="btn btn-primary" aria-haspopup="true" aria-expanded="false">ALL</button>
</div>
<input ng-model="naviagtion.searchText" class="form-control" focus-dir placeholder="Search Routers here"></input>
<span class="input-group-addon" ng-click="clearSearchAndFilters();">
<span class="fa fa-times fa-1x"></span>
</span>
</div>
</div>