using flexbox to align elements in a row

HTML

<div class='flex-row'>
<img src='http://kruxor.com/images/borat_thumbnail.jpg'>
<h2>A Title Tag</h2>
<p>something else</p>
</div>

<div class='flex-row flex-row-reverse'>
<img src='http://kruxor.com/images/borat_thumbnail.jpg'>
<h2>A reversed flex row</h2>
<p>something else</p>
</div>

CSS

.flex-row-reverse {
flex-direction:row-reverse;
}
.flex-row-reverse * {
margin-left:2%;
}
.flex-row {
display:flex;
flex-direction:row;
align-items:center;
}
.flex-row * {
margin-right:2%;
}
.flex-row *:last-child {
margin-right:0%;
}
.flex-row img {
height:64px;
border-radius:5px;
overflow:hidden;
}
.flex-row h2,
.flex-row p
{
justify-content:center;
display: flex;
flex-direction: column;
}

A Title Tag

something else

A reversed flex row

something else