I've been struggling to align two buttons next to an input field, but every time I try, I end up messing everything up.
I managed to align an input field with a single button, but adding a second button is proving to be quite difficult.
Here is the HTML (using AngularJS):
<div class="row">
<div class="col-lg-12">
<form class="form" ng-submit="vm.reCreateTree(ricercaSecondario)" ng-init="aggiornaRicercaPratica()">
<div class="input-group">
<input type="text" ng-model="vm.cercaSecondario" class="form-control" placeholder="{{getTestoPlaceholderRicerca(ricercaPraticaSecondario)}}" required="required" ng-disabled="disabilitaRicercaSecondaria()">
<div class="input-group-btn">
<button class="btn btn-default" type="submit"><i class="fa fa-search"></i></button>
<button class="btn btn-default" type="submit"
tooltip="Espandi filtri di ricerca" tooltip-placement="bottom"
ng-click="toggleRicerca()" ng-show='user.ambitoSelezionato.nome == "Clienti-Polizze"'>
<i ng-class="{'fa fa-caret-up': showEspandiRicerca, 'fa fa-caret-down': !showEspandiRicerca}"></i>
</button>
</div>
</div>
</form>
</div>
</div>
Here is a screenshot of what I'm seeing:
As you can see, the two buttons are not aligned with the input field and they are uneven in size...
Any advice on how to fix this?
UPDATE: I made some changes to the code (thanks to Mukesh Ram) but the buttons are still different sizes..