我需要一个接一个地显示两行不同字体的文本,以便它们的顶行位于相同的垂直位置,即:

我试过用vertical-align: top,但没有运气.而不是预期的结果我有这个:

有没有一些标准的方法来达到预期的效果?
这是我的HTML:
<div id="container">
<span>TEXT</span> TEXT
</div>
Run Code Online (Sandbox Code Playgroud)
和CSS:
#container {
font-size: 30px;
}
#container span {
font-size: 16px;
vertical-align: top;
}
Run Code Online (Sandbox Code Playgroud)