I'm putting together a grid with the featured images as the background and the post title above. It works fine, but when the post title spreads over two lines the entry before or after moves up/down and misaligns the grid. I can't work out why it's doing this so any help would be appreciated! Thanks.

https://www.japanistry.com/test/

This is my CSS:

.FacetFeatured {
width: 32.9%;
height: 140px;
display: inline-block;
margin-bottom: 4px;
background-size: 100% 140px;
}

.FacetFeatured img {
max-width: 100%;
height: auto;
}

.FacetHeadingIMG {
font-weight: bold;
padding-left: 5px;
padding-right: 5px;
font-family: 'PT Sans Narrow', sans-serif;
}

This is the code in the template:

<?php while ( have_posts() ) : the_post(); ?>
<?php $thumb = wp_get_attachment_image_src( get_post_thumbnail_id($post->ID), 'full' );?>
<?php echo '<a href="' . get_permalink( $_post->ID ) . '" title="' .     esc_attr( $_post->post_title ) . '">';?>
<div class="FacetFeatured" style="background-image: url('<?php echo $thumb['0'];?>')">
<div class="FacetHeadingIMG"><a href="<?php the_permalink(); ?>"><?php echo esc_html( get_the_title() );?></a></div>
</div>
<?php echo '</a>';?>
<?php endwhile; ?>

I'm putting together a grid with the featured images as the background and the post title above. 

It works fine, but when the post title spreads over two lines the entry before or after is moved up/down and the grid is misaligned. I can't work out why it's doing this so any help would be appreciated!

Thanks.

My CSS:

.FacetFeatured {
width: 32.9%;
height: 140px;
display: inline-block;
margin-bottom: 4px;
background-size: 100% 140px;
}

.FacetFeatured img {
max-width: 100%;
height: auto;
}

.FacetHeadingIMG {
font-weight: bold;
padding-left: 5px;
padding-right: 5px;
font-family: 'PT Sans Narrow', sans-serif;
}

This is the code in the template:

<?php while ( have_posts() ) : the_post(); ?>
<?php $thumb = wp_get_attachment_image_src( get_post_thumbnail_id($post->ID), 'full' );?>
<?php echo '<a href="' . get_permalink( $_post->ID ) . '" title="' .     esc_attr( $_post->post_title ) . '">';?>
<div class="FacetFeatured" style="background-image: url('<?php echo $thumb['0'];?>')">
<div class="FacetHeadingIMG"><a href="<?php the_permalink(); ?>"><?php echo esc_html( get_the_title() );?></a></div>
</div>
<?php echo '</a>';?>
<?php endwhile; ?>