images are pushed up when p tags are more than one row

Hi!

I'm trying to get some nice rows of 3 divs side by side. Each div contains 2 siblings, 1 image and 1 p-tag.

I've set the p tag to have a max-width of 100px (the same width as the img). When there are longer p tags that span over 2 rows or more the sibling image is pushed up which disrupts the flow of the row (I've tried vertical align).

How do I fix this? I know there are a lot of topics on this and I've been trying out a lot of them but to no avail.

The kicker here is that I won't know which images will have long titles and which will not because I will fetch them from a DB that have new content every day.

It feels like there's such an easy solution but this is one of those problems I've spent hours on and I just can't figure it out.

I can mix up the code a little bit if necessary but I'd like it as clean as possible.

Some people recommended flexbox as a solution which I can't use because I want to be able to reach out to as many people as possible, including people on IE.

Here's a pen: http://codepen.io/JS837/pen/kkgrBg