vertical center inline

by jonofan

HTML

<div class='header'>
    <img src='http://i.imgur.com/J2HToiP.jpg' />
    <div class='middle'>
        <span class='itemheading'>Heading Text</span>
        <span class='itemdate'>Wednesday 01 July 2015</span>
    </div>
</div>

CSS

.header {
    width: 600px;
    border: 1px solid black;
    display: inline-block;
}

.header img {
    width: 50px;
    display: inline-block;
}


.middle {
    position: relative;
    top: 50%;
    transform: translateY(-50%);
    border: 1px solid gray;
    height: 20px;
    width: 400px;
    display: inline-block;
    
}

.middle .itemheading {
    position: absolute;
    bottom:0;
    left: 0;
    font-size: 1.8em;
}

.middle .itemdate{
    position: absolute;
    bottom: 0;
    right: 0;
}