post thumbnail "jump" to the header - wordpress

Question

I'm writing a plugin to display recent posts, however, can't figure out why the thumbnail is not inside the div and "jump" to the header of the page.
This is the code from the plugin:
$my_query = new WP_Query( array(
'post_type' => 'post',
'posts_per_page' => 5
));
if( $my_query->have_posts() ) : while( $my_query->have_posts() ) : $my_query->the_post();
$html .="<div class=\"My-container\">";
$html .="<div class=\"My-item\">" . the_post_thumbnail('thumbnail', array('class' => 'My-postImg')) . "</div>";
$html .="<div class=\"My-item-1\">";
$html .= "<p>" . the_category(', ') . " | " . the_time('M. d') . "</p>";
$html .= "<h2>" . get_the_title() . " </h2>";
$html .= "<p>" . the_category(', ') . "</p>";
$html .= "Read more";
$html .="</div>";
endwhile; endif;
$content .= $html;;
return $content;
another question: I try to display the recent posts at the end of the post. Therefore I have to return the $content after I add it to the $html. Is there cleaner / more efficient way to do this?
Thanks

Answer 1

thanks for your help. Here's the CSS. Just before, here's the thing: if I put for example just text or , etc. then it will display correctly inside the . Only when it comes to the thumbnail it "jumps".
The .My-container is just a standard flex box
#charset "utf-8";
/* CSS Document */
.My-container {
display: -webkit-box;
display: -moz-box;
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
-webkit-flex-flow: row nowrap;
flex-direction: row;
flex-wrap: nowrap;
}
.My-item {
min-width: 300px;
min-height: 300px;
background-color: orange;
display: block;
}
.My-item-1 {
width: 200px;
height: 100px;
background-color: green;
}