Align div's next to each other - php

Question

As you might see, im having some problems aligning 4 divs next to each other:
For some reason i cant get them to be aligned.
Can anybody tell me whats wrong?
html:
<?php foreach ($postslist as $post) : setup_postdata($post); ?>
<div class="frontPost">
<a href="<?php the_permalink();?>">
<div class="crop">
<img class="postImg" src="<?php the_field('frontimg')?>" alt="frontImg">
</div>
<p class="postTitle"> <?php the_title()?> </p>
<p class="postIntro"> <?php the_field('introduction') ?> </p>
</a>
</div>
<?php endforeach; ?>
css:
.crop {
width: 250px;
height: 150px;
overflow: hidden;
}
.frontPost{
width: 250px;
display: inline-block;
margin-left: 5px;
margin-top: 25px;
margin-right: 5px;
}
.bigTxt{
letter-spacing: 10px;
font-size: 16px;
}
.postTitle{
text-transform: uppercase;
letter-spacing: 1.5px;
font-weight: bold;
}
.postIntro{
text-align: left;
}

Answer 1

What about using vertical-align property. Use the code below for css
.crop {
width: 250px;
height: 150px;
overflow: hidden;
}
.frontPost{
vertical-align:top;
width: 250px;
display: inline-block;
margin-left: 5px;
margin-top: 25px;
margin-right: 5px;
}
.bigTxt{
letter-spacing: 10px;
font-size: 16px;
}
.postTitle{
text-transform: uppercase;
letter-spacing: 1.5px;
font-weight: bold;
}
.postIntro{
text-align: left;
}
Hope this helps you

Answer 2

Where your CSS code is showing inline-block add this rule to it.
vertical-align:top;
Output:
.frontPost{
width: 250px;
display: inline-block;
margin-left: 5px;
margin-top: 25px;
margin-right: 5px;
vertical-align:top;
}
This will then make all of the divs align at the top of the parent div.
A useful link to read through! - http://css-tricks.com/almanac/properties/v/vertical-align/