¿Cómo alinear dos palabras con diferentes tamaños de letra en la misma línea?

Question

I necesita mostrar dos líneas de texto con diferente tamaño de la fuente, una tras otra, de modo que sus líneas superiores estaban en la misma posición vertical, es decir:

He intentado utilizar vertical-align: top, pero no suerte. En lugar de resultado esperado tengo esto:

¿Hay alguna forma estándar para lograr el resultado deseado?

Aquí es mi HTML:

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

y CSS:

#container { 
    font-size: 30px; 
} 

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

Answer 1

Una forma sería:

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

Ajuste el 2px para adaptarse.