How to top align two words with different font sizes the same line?

Question

I need to display two lines of text with different font size, one after another, so that their top lines were at the same vertical position, i.e.:

I tried to use vertical-align: top, but no luck. Instead of expected result I have this:

Is there some standard way to achieve the desired result?

Here is my HTML:

<div id="container">
    <span>TEXT</span> TEXT
</div>

and CSS:

#container {
    font-size: 30px;
}

#container span {
    font-size: 16px;
    vertical-align: top;
}

Answer 1

One way would be:

#container span {
    position: relative;
    top: 2px;
    }

Adjust the 2px to suit.