Why does using an input group break the baseline alignment in bootstrap?

Question

If I have a form with a label next to an input, in plain HTML, and both are inline (or inline block), then they are aligned by their baseline. But when using bootstrap and p

Answer 1

Because the input group is display: inline-table; and the label is outside the input-group. If you inspect the input-group-addon element, you see that it is set to display: table-cell; and vertical-align: middle;. If you move the label inside the input-group and style it same as the input-group-addon it lines up correctly.

<div class="form-group with-input-group">    
    <div class="input-group">
        <label>label</label>
        <input type="text" class="form-control" value="value" />
        <span class="input-group-addon">addon</span>
    </div>
</div>

.

.input-group label {
    padding: 4px;
    display: table-cell;
    vertical-align: middle;
}

http://jsfiddle.net/N62he/