vertical align <span> element

Question

html

<div class="main">
    <h1>Test</h1>
    <span class="details">Jan 21, 2014</span>
</div>

css

.main{
    background-color: #666666;
    border: 1px solid red;
}
h1{
    background-color: #383838;
    display: inline-block;
    margin: 0;
    padding: 0;
}
.main span{
    display: inline-block;
    vertical-align: middle;
}

jsFiddle

This seems to be really a simple problem, but I'm not able to fix it or I'm being too lazy. Just would like to vertical-align: middle and align it to the right of the div, if I use float: right the element attaches to the bottom of the border above. Don't want to use line-height as well.

Answer 1

If you want a solution that doesn't include line-height, and float, also you want to align the span to the right ....

Then use display: table; for the parent element having nested child elements set to display: table-cell;

Demo

.main{
    background-color: #666666;
    border: 1px solid red;
    display: table;
    width: 100%;
}
h1{
    background-color: #383838;
    display: table-cell;
    margin: 0;
    padding: 0;
    width: 20%;
}
.main span{
    display: table-cell;
    vertical-align: middle;
    text-align: right;
}

Answer 2

You want to add vertical-align: middle; to your h1

Fiddle