Align divs with different heights using css - php

Question

Hi I want to align two rows of div under each other no matter the height of the divs in the row above. I'm using display:inline-block; so that the divs will inline next to each other.
Here is what I'm getting
Photo 1
Notice that div #2 is slightly shorter than div one
and here is what i want to accomplish
enter image description here
Notice that in the second picture no matter the height of the div above it the second row still aligns as it should.
here is my css
.post-set{
max-width:445px;
margin:0px 1px 15px 0px;
padding:0;
display:inline-block;
border-bottom:1px solid #e1e1e1;
vertical-align:top;
}
i'm using this in my wordpress theme. Here is the html along with the php.
<div class="medium-8 column post-set" style="padding:0;">
<a href="<?php the_permalink(); ?>" title="<?php printf(__( 'Read %s', 'wpbx' ), wp_specialchars(get_the_title(), 1)) ?>">
<?php the_post_thumbnail('fifth-post'); ?>
</a>
<div class="row column" style="padding:0">
<h1 class="fifth-post-title"><?php the_title(); ?><h1>
<div class="fifth-ex">
<?php echo excerpt(18); ?>
</div>
<span class="fifth-by-line"> BY: <?php the_author_posts_link(); ?></span>
</div>
</div>
You can visit GetVersed.us to see a live example. It's the section under the "Get Your Voice Heard Banner"
is there a way to accomplish this without suggesting masonry?

Answer 1

I don't see HTML you are using. But here is solution with my html code and yours CSS class. Notice that in CSS I set width instead of max-width.
Different height of div blocks I set using inline style. It can be set in class or auto.
.post-set{
width:60px;
margin:0px 1px 15px 0px;
padding:0;
display:inline-block;
border-bottom:1px solid #e1e1e1;
vertical-align:top;
background-color:black;
}
<div>
<div class="post-set" style="height:20px;">
</div>
<div class="post-set" style="height:35px;">
</div>
</div>
<div>
<div class="post-set" style="height:15px;">
</div>
<div class="post-set" style="height:30px;">
</div>
</div>

Answer 2

You can create a simple table and place your divs as follows:
<table>
<tbody>
<tr>
<td>
<div 1...>
</td>
<td>
<div 2...>
</td>
</tr>
<tr>
<td>
<div 3...>
</td>
<td>
<div 4...>
</td>
</tr>
</tbody>
</table>
This will make sure that the alignment is as you wish. You can then add some styles if you wish.

Answer 3

You should look into flexbox.
HTML:
<div class="item_container">
<div class="item">
</div>
<div class="item">
</div>
</div>
<div class="item_container">
<div class="item">
</div>
<div class="item">
</div>
</div>
CSS:
.item_container {
display:flex; align-items:stretch;
}
.item { float:left; }