How do I align Label and Input on the same line to the right?

Question

I'm struggling while trying to locate 2 buttons on the left of an input field. I already tried several suggestions on the internet but I couldn't make it the way I want.

<div class="col-xs-6" >
    <div class="row">
        <div class="col-xs-12">
            <div class="pull-right">
                <div class="search" style="height: 18px" ng-if="vm.showSearch()">
                    <form style="margin:0px" name="filter_actions"  novalidate>
                        <div>
                            <input id="freeTextSearch" type="text"  class="form-control input-sm" autofocus ng-change="vm.filterTable(Search)" ng-model="Search"
                                   style="text-indent: 5px;"  minlength="1" ng-model-options="{debounce:100}" id="Search" name="Search" placeholder="Search fields">
                            <a ng-show="Search" ng-click="localSearch = ''; vm.filterTable(localSearch)"><i style="vertical-align: middle; top:4px; right:35px; position: absolute" class="glyphicon glyphicon-remove"></i></a>
                        </div>
                    </form>
                </div>
                <div class="btn-group btn-group-xs" role="group" aria-label="...">
                    <label class="btn btn-default" role="button" ng-click="vm.popUp()"><i class="fa fa-expand" style="color:darkgreen;"></i></label>
                </div>
            </div>
        </div>
    </div>
</div>  

This is how it looks like :

Answer 1

Keep in mind, that label is an inline element similar to span , so you need to set its css to display: inline-block to behave like a div

once you have done this, the easiest way to have them in the same line is to use display:flex and flex-wrap: nowrap on the parent div.

here is my favorite flex-cheat-sheet

I have simplified your example and you can see how this works clicking below on Run code snippet.

 .pull-right { display: flex; flex-wrap: nowrap; } .pull-right input{ border: 1px solid green;} .pull-right label{ border: 1px solid red; display: inline-block;} 

 <div class="pull-right"> <div class="search" style="height: 18px" ng-if="vm.showSearch()"> <form style="margin:0px" name="filter_actions" novalidate> <div> <input id="freeTextSearch" type="text" class="form-control input-sm" autofocus ng-change="vm.filterTable(Search)" ng-model="Search" style="text-indent: 5px;" minlength="1" ng-model-options="{debounce:100}" id="Search" name="Search" placeholder="Search fields"> <a ng-show="Search" ng-click="localSearch = ''; vm.filterTable(localSearch)"> <i style="vertical-align: middle; top:4px; right:35px; position: absolute" class="glyphicon glyphicon-remove"> </i></a> </div> </form> </div> <div class="btn-group btn-group-xs" role="group" aria-label="..."> <label class="btn btn-default" role="button" ng-click="vm.popUp()"><i class="fa fa-expand" style="color:darkgreen;">your icons</i></label> </div> </div>