Simple CSS trick to place author pic and name inline

This CSS styling helps when you need to place two elements inline. Often we need to place two elements to together of different heights.

Say we have an element one of height 60px and element two of 20px and we need the second element to be vertically center of the first element, below trick might be helpful

HTML markup for placing elements side by side

<div class="meta">
<div class="author-pic">
<img src="https://download.unsplash.com/reserve/IPEivX6xSBaiYOukY88V_DSC06462_tonemapped.jpg" />
        </div>
by <span class="author-name">__Author Name</span>
</div>

Adding CSS to the above HTML

.author-pic {
    display:inline-table;
    vertical-align:middle;
   
}
.author-pic img {
    width:60px;
    height:60px;
    border-radius:50%;
}
.author-name {
    font-style:italic;
}

The result would be something like this.

Fiddle for this example available here http://jsfiddle.net/6w84prkj/