How to combine two words with different font sizes on one line?

Question

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

I tried using vertical-align: top but no luck. Instead of the expected result, I have the following:

Is there any 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 of the methods:

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

Adjust 2px to fit.