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.

    
    

        label
        
        addon
    

.

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

http://jsfiddle.net/N62he/