Bootstrap 2.3.2 - Right-align a Button with an Input inside of a form-horizontal

Question

I'm having trouble styling the following form using Twitter Bootstrap 2.3.2

I can't seem to right-align the button with the other labels. Also, I can't get the last textbox to be in line with the button.

This is the form I have so far: JSFiddle example

<form class="form-horizontal">

<div class="control-group">
    <label class="control-label" for="inputFirstname">First name</label>
    <div class="controls">
        <input type="text" id="inputFirstname" placeholder="First name">
    </div>
</div>

<div class="control-group">
    <label class="control-label" for="inputSurname">Surname</label>
    <div class="controls">
        <input type="text" id="inputSurname" placeholder="Surname">
    </div>
</div>

<div class="control-group">
    <label class="control-label" for="inputEmail">Email</label>
    <div class="controls">
        <input type="text" id="inputEmail" placeholder="Email">
    </div>
</div>

<div class="control-group">
    <button class="btn btn-primary">Browse</button>
    <div class="controls">
        <input type="text" id="inputSomeText" placeholder="Some text">
    </div>
</div>

This is the end result which I trying to achieve:

Any help is greatly appreciated!!

Answer 1

Change your last control-group and also add margin-top:-5px; to the button (shown below via class label-btn):

HTML for last control-group:

<div class="control-group">
    <label class="control-label"><button class="btn btn-primary inline label-btn">Browse</button></label>
    <div class="controls">
        <input type="text" id="inputSomeText" placeholder="Some text">
    </div>
</div>

CSS

.label-btn {
    margin-top: -5px;
}

Updated fiddle