vertical center inline

HTML

<div class='header'>
    <div class="img-wrap">
        <img src='http://i.imgur.com/J2HToiP.jpg' />
    </div>
    <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;
}
.header img {    
    width: 50px;
}
.header .img-wrap {
    display: table-cell;
    vertical-align: middle;
}
.header .middle {
    width: 100%;
    display: table-cell;
    vertical-align: middle;
    border: 1px solid gray;    
}
.itemdate {
    float: right;
}