how to make my custom gallery work in wordpress


So am creating a custom theme in WordPress and looking to achieve this enter image description here

I was able to output my category but not too sure how to output the remaining information. As you can see from the image below for each category there is a recent blog post on the left and then other blog post in the same category on the right.

Below is my code please advise what am doing wrong.

<?php  global $  post;     $  args = array(        'posts_per_page' => 4,        'post_type'     => 'post',        'orderby' => 'ASC',                );                        $  query = new WP_Query($  args);             while($  query->have_posts()): $  query->the_post();             $  taxonomy = 'category';             $  term = wp_get_post_terms($  post->ID, $  taxonomy);             ?>                                                 <!-- Left Details Caption -->                                         <div class="col-xl-6 col-lg-12">                                             <div class="whats-news-single mb-40 mb-40">                                                 <div class="whates-img">                                                     <?php the_post_thumbnail('small');?>                                                 </div>                                                 <div class="whates-caption">                                                     <h4><a href="latest_news.html"><?php the_title();?></a></h4>                                                     <span>by <?php the_author();?>   -   <?php echo esc_html(get_the_date()); ?></span>                                                     <p><?php the_excerpt();?></p>                                                 </div>                                             </div>                                         </div>                                           <!-- Right single caption -->                                          <div class="col-xl-6 col-lg-12">                                             <div class="row">                                                 <!-- single -->                                                 <div class="col-xl-12 col-lg-6 col-md-6 col-sm-10">                                                     <div class="whats-right-single mb-20">                                                         <div class="whats-right-img">                                                         <?php the_post_thumbnail('small');?>                                                         </div>                                                         <div class="whats-right-cap">                                     <?php if ($  term && !is_wp_error($  term)) :?>                                         <?php foreach ($  term as $  serv_terms) :?>                                                             <span class="colorb"><?php echo $  serv_terms->name;?></span>                                         <?php endforeach; endif;?>                                                             <h4><a href="<?php the_permalink();?>"><?php the_title();?></a></h4>                                                             <p><?php echo esc_html(get_the_date()); ?></p>                                                          </div>                                                     </div>                                                 </div>                                                                                          </div>                                         </div>                          <?php endwhile; wp_reset_postdata();?>