You can just allow the text to behave as normal inline styles like so, Demo.
Here is the css:
.big {
font-size: 20px;
}
.small {
font-size: 10px;
}
The problem is being caused by floating them.
Or you can do something like this,
css:
.parent {
vertical-align: bottom;
}
.parent span {
display: inline-block;
width: 200px;
height: 50px;
}
.big {
font-size: 20px;
}
.small {
font-size: 10px;
}
Finally, a fiddle: Demo
OR!! You can go about this option,
css:
.parent {
display: table;
vertical-align: bottom;
width: 100%;
}
.parent span {
display: table-cell;
width: 33%;
height: 50px;
}
.big {
font-size: 20px;
}
.small {
font-size: 10px;
}
Yet another fiddle, Demo