Issue when trying to make some elements one line – Twitter bootstrap

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;
}