I’m making a custom recent-posts shortcode and I have a problem with the thumbnail image, it always shows it above everything else (permalink, title, etc…) even though I put it after in the code, is there something in wordpress that forces this behavior ?

Here is the code:

function mmx_recent_posts_shortcode($atts, $content = NULL)
{
    $atts = shortcode_atts(
        [
            'orderby' => 'date',
            'posts_per_page' => '3'
        ], $atts, 'recent-posts' );

    $query = new WP_Query( $atts );

    if ( $query->have_posts() ) {
        $output = '<div class="row">';

        while($query->have_posts()) : $query->the_post();

            $output .= '<div class="col span_4">
                <h4>' . get_the_title() . '</h4>
                <a href="' . get_permalink() . '">Lire la suite</a>' . the_post_thumbnail('thumbnail', ['class' => 'droplet-img', 'title' => get_the_title()]) . '
            </div>';

        endwhile;

        wp_reset_query();

        return $output ; '</div>';
    }
}
add_shortcode('mmx-recent-posts', 'mmx_recent_posts_shortcode');

The css code for droplet-img:

.droplet-img {
    border-radius: 0 50% 50%;
}

and here is a screenshot of how it is right now:

and here of how I want it to be:

If anybody has any idea how to fix it, I’d greatly appreciate it!

Thanks!