HTML/SCSS Align images flush above a text

Question

I use splidejs to create a slider for image and text content. The size of the sliderList (ul) is based on the largest list item (sliderItem --> li). Each SliderItem consists of a wrapper (item-wrapper), which contains an image and a text. Both the image and the text can be of different length/highness. Now the SliderItems should be aligned so that each image element is above the text, but the texts are aligned at the bottom of the container (with a dynamic height) and each text starts at the same height. That is, the texts are all placed at the same height at the end of the container and the image should be placed directly above them with a defined margin. Is this somehow possible using SCSS? In case of need I can also use JS to reposition something if needed.

Attached is a mockup of how it should look:

Some code snippet: HTML

<div class="splide">
  <div class="splide__track">
    <ul class="splide__list"> //Slider List
       <li class="splide__slide"> //Slider Item
        <div class="item-wrapper"> 
         <div class="image">
           <img/>
         </div>
        <div class="text">
         <h2>Some text</h2>
          Some other text
        </div>
       </div>
      </li>

CSS

  .splide {
       width:100%;
       height: 100%;
     }
     .splide__list {
       display: flex;
       .splide__slide{
          .item-wrapper{
             display: flex;
             flex-direction: column;
             justify-content: space-between;
             height: 100%;
             width: 100%;
              .image {
                img {
                  width: 100%
                  height: auto
                }
              }
              .text {
              }
            }
          }
        }

Answer 1

Thanks for all your answers. I made it work by some hacky js: First i need to wait for my document to be fully loaded calling

 document.addEventListener('readystatechange', () => {
  if (document.readyState === 'complete') {
    this.calculateImages();
  }
});

then i process every image and calculcate the tallest image (get the height of the tallest element in pixels). After this, i move every image by its height difference (difference actuall image to max height image) by applying the height difference with a margin-top. Thats it for me. I guess a bit hacky but it works.