Come allineare in alto due parole con caratteri diversi della stessa linea?

Question

Ho bisogno di visualizzare due righe di testo con diverse dimensioni del carattere, una dopo l'altra, in modo che le loro linee migliori sono nella stessa posizione verticale, cioè:

Ho provato ad utilizzare vertical-align: top, ma nessun fortuna. Invece di risultato atteso ho questo:

C'è qualche modo standard per ottenere il risultato desiderato?

Ecco il mio HTML:

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

e CSS:

#container { 
    font-size: 30px; 
} 

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

Answer 1

Un modo potrebbe essere:

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

Regolare il 2px per adattarsi.