JSFiddle - React, Tailwind, and code Playground

HTML

<div class="splide">
  <div class="splide__track">
    <ul class="splide__list"> 
      <li class="splide__slide">
        <div class="item-wrapper">
          <div class="image">
            <img src="https://via.placeholder.com/150x300"/>
          </div>
          <div class="text">
            <h2>Some text</h2>
            Some other text
          </div>
        </div>
      </li>
      <li class="splide__slide">
        <div class="item-wrapper">
          <div class="image">
            <img src="https://via.placeholder.com/150x200"/>
          </div>
          <div class="text">
            <h2>Some text</h2>
            Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ea aperiam, repellat similique deleniti accusantium nostrum. Rerum neque animi dolore doloribus voluptate officiis, saepe ipsam, suscipit voluptas, eaque nesciunt modi eos!
          </div>
        </div>
      </li>
      <li class="splide__slide"> 
        <div class="item-wrapper">
          <div class="image">
            <img src="https://via.placeholder.com/150x350"/>
          </div>
          <div class="text">
            <h2>Some text</h2>
            Some other text
          </div>
        </div>
      </li>
    </ul>
  </div>
</div>

CSS

ul {
  display: grid;
  grid-template-rows: 1fr 1fr;
  grid-auto-flow: column;
  grid-auto-columns: 1fr;
  list-style: none;
  margin: 0;
  padding: 0;
}

.splide__slide,
.item-wrapper {
  display: contents;
}

.image {
  display: flex;
  align-items: flex-end;
}