Empty div within parent should appear the same

If you see the following jsfiddle, the div a elements that have no text appear on a different level than the ones with text. Is there a way with CSS to make these appear in a row whether or not there is text present? (w/o changing the markup).

I set the link elements as block so that they would be the same height if some link text was empty

http://jsfiddle.net/ch9Ax/

Adding vertical-align:top; to the rule #bzm .button fixed it in my test browser

Add height:27px to your bzm.button :) This will ensure that its the same size, with, or without content inside of it.

#bzm .button {
display: inline-block;
width: 90px;
height:27px;
}

Use float css attribute instead of display: inline-block for the .button class.

i.e.:

#bzm .button {
display: inline-block;
width: 90px;
}

to

#bzm .button {
float: left;
width: 90px;
}

Working example: http://jsfiddle.net/ch9Ax/12/

The problem is the

#bzm .button {
    display:inline-block;
    width: 90px;
}

Chnage that to

#bzm .button {
    float:left;
    width: 90px;
}

And style accordingly.

Example: http://jsfiddle.net/jasongennaro/ch9Ax/14/