So what I did was I've moved the <img> tag above the title, I've added the height to the title-wrapper and moved it in margin by the size of the image. Then added the bottom: 0 to make it appear on the bottom.

This works and the title is displayed as I want it.

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" integrity="sha384-QWTKZyjpPEjISv5WaRU9OFeRpok6YctnYmDr5pNlyT2bRjXh0JMhjY6hW+ALEwIH" crossorigin="anonymous">
<div class="col-md-4">
  <div class="archive-post-small">

    <img class="archive-post-small-thumbnail" style="object-fit: cover" src="https://instawp.com/wp-content/uploads/2024/05/icon-256x256-399.webp" width="100%" height="250px">

    <div class="archive-post-small-thumbnail-title-wrapper">
      <div class="archive-post-small-thumbnail-title">
        <h5>Title of the post</h5>
      </div>
    </div>

    <div class="archive-post-top-wrapper">

      Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus ultricies vulputate augue.

      <div class="position-relative" style="padding-top: 30px">
        <div class="position-absolute bottom-0 end-0">
          <a class="btn btn-primary" href="<?php the_permalink();?>">Read More...</a>
        </div>
      </div>
    </div>
  </div>
</div>

.archive-post-small-thumbnail-title-wrapper  
{     
    margin-top: -260px;     
    position: relative;     
    height: 250px; 
}   

.archive-post-small-thumbnail-title  
{     
    bottom: 0px; 
}