How to separate posts from WP_Query into 2 columns - php

Question

I need to separate posts from WP_Query into 2 columns: first post will go to right column, 3 other posts will go to left column so the structure will look like this - https://prnt.sc/vc044d
Please help me to improve my code.
Thanks a lot.
function mk_latestposts() {
// the query
$the_query = new WP_Query( array( 'posts_per_page' => 4 ) );
// The Loop
if ( $the_query->have_posts() ) {
$postcount = 0;
$string .= '<ul class="mk-recent-posts-list">';
while ( $the_query->have_posts() ) {
$the_query->the_post();
$postcount++;
// if this is the first post
if ( $postcount == 1 ) {
$string .= '<li class="first-post">';
$string .= '' . get_the_post_thumbnail($post_id, array( 50, 50) ) . get_the_title() . get_the_date() .'</li>';
} else {
// if this is the next post
$string .= '<li class="next-post">';
$string .= '' . get_the_post_thumbnail($post_id, array( 50, 50) ) . get_the_title() . get_the_date() .'</li>';
}
}
} else {
// no posts found
}
$string .= '</ul>';
return $string;
/* Restore original Post Data */
wp_reset_postdata();
}
// Add a shortcode
add_shortcode('mklatestposts', 'mk_latestposts');

Answer 1

Your code is fine You can do this with CSS. Just add a common class to every <li> Like <li class='single-post'> and then apply this CSS. You can change it from List structure to Div structure whatever you want.
li.single-post{ width: 47%; float: left;} ul.mk-recent-posts-list { width: 100%; }