wordpress one category split into two columns

Question

I'm trying to split a wordpress category into two columns, showing only three posts. Have attached the current coding, but the title of the final blog is moved over to the second column and not retaining it's place where it should be, is anyone able to assist or help guide me? Or if there is a better way to approach this.

Greatly appreciated!

        <div class="featuredPosts">

<?php $catquery = new WP_Query( 'cat=3&posts_per_page=5' ); ?>


<?php while($catquery->have_posts()) : $catquery->the_post(); ?>


    <div class="postFeatured">

<img src="<?php echo get_the_post_thumbnail_url($post_id, 'full'); ?>" class="featuredImage">
        <h2><?php the_title(); ?></h2>
        <a href="<?php the_permalink() ?>" rel="bookmark">Read More...</a>
        </div>


<?php endwhile;
    wp_reset_postdata();
?>

                    </div>

and CSS

.featuredPosts {
      -moz-column-count: 2;
      -moz-column-gap: 4em;
      -moz-column-rule: none;
      -webkit-column-count: 2;
      -webkit-column-gap: 4em;
      -webkit-column-rule: none;
    column-count: 2;
    column-gap: 4em;
    column-rule: none;
}



.postFeatured {
margin: 0 0 5em 0;  
}

.featuredImage {
    border-radius: 8px;
    box-shadow:  0px 0px 20px 0 rgba(000, 000, 000, 0.2);
display: block;
}



.postFeatured h2 {
font-size: 25px;
color: #2B2928;
letter-spacing: 0;
line-height: 40px;
padding: 1em 0;
margin: 0px;
}

Answer 1

Try adding the following to .postFeatured:

-webkit-column-break-inside: avoid;
page-break-inside: avoid;
break-inside: avoid;

Example:

.featuredPosts {
  -moz-column-count: 2;
  -moz-column-gap: 4em;
  -moz-column-rule: none;
  -webkit-column-count: 2;
  -webkit-column-gap: 4em;
  -webkit-column-rule: none;
  column-count: 2;
  column-gap: 4em;
  column-rule: none;
}

.postFeatured {
  margin: 0 0 5em 0;
  -webkit-column-break-inside: avoid;
  page-break-inside: avoid;
  break-inside: avoid;
}

.featuredImage {
  border-radius: 8px;
  box-shadow: 0px 0px 20px 0 rgba(000, 000, 000, 0.2);
  display: block;
}

.postFeatured h2 {
  font-size: 25px;
  color: #2B2928;
  letter-spacing: 0;
  line-height: 40px;
  padding: 1em 0;
  margin: 0px;
}

<div class="featuredPosts">
  <div class="postFeatured">
    <img src="http://via.placeholder.com/350x150" class="featuredImage">
    <h2>Title</h2>
    <a href="#">Read More...</a>
  </div>
  <div class="postFeatured">
    <img src="http://via.placeholder.com/350x150" class="featuredImage">
    <h2>Title</h2>
    <a href="#">Read More...</a>
  </div>
  <div class="postFeatured">
    <img src="http://via.placeholder.com/350x150" class="featuredImage">
    <h2>Title</h2>
    <a href="#">Read More...</a>
  </div>
</div>