Vertically align inline elements

Alternative to floats

by dipish

HTML

<div class="container clearfix">
    <span class="big">Hello</span>
    <span class="small">world!</span>
</div>

CSS

.clearfix {zoom: 1;}    /* IE hasLayout */
.clearfix:after {
    content: ".";
    display: block;
    height: 0;
    clear: both;
    visibility: hidden;
}

.container {
}

.big {
    display: inline-block;
    vertical-align: bottom;
    font-size: 40px;
}

.small {
    margin-left: 10px;
    vertical-align: 5px;    /* This needs to be adjusted according to font-size */
    /* if you need to vertically align block elements without text, 
        just set vertical-align: bottom; everywhere */
    display: inline-block;
    font-size: 20px;
}