Align different texts in different spans to same line

Align different texts in different spans to same line

I'm trying to make a table which gets some information from database. But
data has different styles, for e.g. different font-sizes. Therefore they
need to be in same line. Here is html code:
<div id="parent">
<span id="first">first</span>
<span id="second">second</span>
</div>
CSS:
span { vertical-align: text-bottom; }
#first {
font-size:200%;
}
#second {
font-size: 100%;
}
But these codes did not fix this problem. Here is an example fiddle.