Horizontally Align Text w/ Ellipsis with jQuery button

Question

I am trying to horizontally align some text (w/ ellipsis) with a jquery button and can't figure out whats going on.

Here is a jsfiddle displaying my problem:

http://jsfiddle.net/5bVDu/

<span>
    <span id='heading'>Long Heading That Requires Ellipsis</span>
    <span id='hiddenID'>ID</span>
    <button id='closeTab'></button>
</span>

As you can see, the button appears to be a little offset (lower) from the text, how can I get them to appear horizontally aligned?

I've tried messing with padding, margin, vertical-align with no success, would really appreciate some help from any of you css gurus out there! thanks!

Answer 1

Add vertical-align:top to #closeTab :

#closeTab {
    height: 16px;
    width: 16px;
    margin-left:5px;
    vertical-align:top;
}

jsFiddle example