I'm unable to format the results from WP_query

Hello, I’m working on my first from scratch theme for wordpress and I want to create Recent Post Box layouts using shortcodes. The Layout I want is to show the last post in separate column with bigger thumbnail and the other posts on the right side as a list but till now it looks very ugly. I’m using WP_QUERY to fetch the posts from db and this is my code:

$sql = new WP_Query( array(
        'category_name' => $kategoria,
        'posts_per_page' => $nrPostimeve
        ) );
if ( $sql->have_posts() ) : ?>

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

    <div class="box-1">
    <div class="headline">
        <?php
        $firstPost = '';
        if ($sql->current_post == 0) {
            $postUrl = the_permalink();

            $firstPost .= '<a href="' . $postUrl . '" target="_blank">';
            $firstPost .=  the_post_thumbnail();
            $firstPost .= '<h3>' . the_title() . '</h3>';
            $firstPost .= the_excerpt() . '</a>';

            echo $firstPost;
        }
        ?>

     </div>

    <div class="recentPosts">
        <div class="small-items">

        <div class="thumb">
            <?php the_post_thumbnail() ?>
        </div>

        <div class="title">
            <a href="<? the_permalink() ?>">
                <h4> <?php the_title() ?></h4>
            </a>
        </div>
        </div> <!-- loop items -->
    </div> <!-- endSidePosts -->

     <?php
        endwhile;
        wp_reset_postdata();
        else :
    ?>
    <p> <?php _e( 'Sorry, no posts matched your criteria.' ); ?>  </p>
    <?php endif; ?>

  </div> <!-- end BoxLayout -->

Here is the layout I want to implement, btw the screenshot from layout is when I implement it using javascript and JSON data but I want to implement it inside the backend so it will fetch the results faster but till now unsuccessfully.
[img]https://i.imgur.com/00qzuYM.png?1[/img]

This is the output from php code,posted above:
[img]https://i.imgur.com/UdLv11L.png[/img]