how to make my custom gallery work in wordpress

So am creating a custom theme in WordPress and looking to achieve this

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();?>