Issue when trying to make some elements one line - css

Question

I'm making a bar with some fields, I want it to looks like this:
But yet it looks like this:
As you can see, there are some problems
The button is not on the same line
Elements are not vertically aligned (the text is a bit higher than the serch bar)
I'm using Twitter Bootstrap and some CSS, I provide you a Plunker if you want to test the code (don't forget to put Plunker view in full screen or it won't show correclty).
Can you help me fix these problems?
PS: Language is french, I can translate if necessary :)
HTML code
<hr/>
<div class="row">
<div class="col-md-3">
<span class="text-standard-bold">MON STATUT : </span>
<span class="statut">Administrateur</span>
</div>
<div class="input-group col-md-3 recherche">
<input type="search" class="form-control" placeholder="Rechercher un compte ..."/><br/>
<span class="input-group-addon">
<span class="glyphicon glyphicon-search"></span>
</span>
</div>
<div class="col-md-3">
<button type="button" class="btn btn-nouveau">
<span class="glyphicon glyphicon-plus"></span>
<span class=""> AJOUTER UN UTILISATEUR</span>
</button>
</div>
</div>
<hr/>
CSS CODE
* {
border-radius: 0 !important;
}
.statut {
font-size: 16px;
}
.recherche .input-group-addon {
border-radius: 0;
color: #FFF;
background-color: #004392;
cursor: pointer;
}
.recherche .input-group-addon:hover {
color: #fdb813;
}
.recherche .form-control, .input-group-addon {
border-style: solid;
border-width: 1px;
border-color: #004392;
}
.text-standard {
font-size: 16px;
color: rgb(1, 70, 148);
}
.text-standard-bold {
font-size: 16px;
color: rgb(1, 70, 148);
font-weight: bold;
}

Answer 1

Having together the .input-group and .col-md-3 class with break the .col-md-3 class. I would suggest to have them seperately. This will ensure that it will work in all screen sizes, e.g. when col-sm-* and col-xs-* are activated.
Also, for the vertical align issue, you can use the .form-control-static which has the same padding with textboxes and buttons.
<hr />
<div class="row">
<div class="col-md-3">
<p class="form-control-static">
<span class="text-standard-bold">MON STATUT : </span>
<span class="statut">Administrateur</span>
</p>
</div>
<div class="col-md-3">
<div class="input-group recherche">
<input type="search" class="form-control" placeholder="Rechercher un compte ..."><br>
<span class="input-group-addon">
<span class="glyphicon glyphicon-search"></span>
</span>
</div>
</div>
<div class="col-md-3">
<button type="button" class="btn btn-nouveau">
<span class="glyphicon glyphicon-plus"></span>
<span class=""> AJOUTER UN UTILISATEUR</span>
</button>
</div>
</div>
<hr />
Here is a working demo: http://www.bootply.com/MyKe33IrUu

Answer 2

input-group class is float:none. if we change it it will work
<div class="row">
<div class="col-md-3">
<span class="text-standard-bold">MON STATUT : </span>
<span class="statut">Administrateur</span>
</div>
<div class="input-group col-md-3 recherche" style="float:left;">
<input type="search" class="form-control" ng-model="cc.search" placeholder="Rechercher un compte ..."/><br/>
<span class="input-group-addon">
<span class="glyphicon glyphicon-search"></span>
</span>
</div>
<!-- Nouveau compte -->
<div class="col-md-3 pull-right">
<button type="button" class="btn btn-nouveau" ng-click="cc.modeCreation = !cc.modeCreation">
<span class="glyphicon glyphicon-plus"></span>
<span class=""> AJOUTER UN UTILISATEUR</span>
</button>
</div>
</div>
<hr/>
<style>
* {
border-radius: 0 !important;
}
.statut {
font-size: 16px;
}
.recherche .input-group-addon {
border-radius: 0;
color: #FFF;
background-color: #004392;
cursor: pointer;
}
.recherche .input-group-addon:hover {
color: #fdb813;
}
.recherche .form-control, .input-group-addon {
border-style: solid;
border-width: 1px;
border-color: #004392;
}
.text-standard {
font-size: 16px;
color: rgb(1, 70, 148);
}
.text-standard-bold {
font-size: 16px;
color: rgb(1, 70, 148);
font-weight: bold;
}
</style>