Aligning a few lines of text with an image

I recently needed to align two lines of text with an image. To give you the basic idea, just imagine the person's name and title alongside their avatar.

For me, this is one of the messy areas using float and then just leaving the text aligned with the top of the image for simplicity's sake and hoping everything else looks good. This time, I was forced to ensure the middles lined up and I remember reading about the flexible box layout. I decided to see what I could do with it in these regards and I was very satisfied with the results.

So without further ado, here is my pen describing the process:

See the Pen Align Text with Image by Galastun (@galastun) on CodePen.

If you have easier ways or other ways you like, feel free to share. I'm always up for doing things better.