JSFiddle - React, Tailwind, and code Playground

HTML

<div class="grid-container">
  <div class="img"></div>
  <div class="top">Apples</div>
  <div class="bottom">Butter</div>
</div>

<div class="grid-container">
  <div class="img">
    <img src="https://via.placeholder.com/100">
  </div>
  <div class="top">Apples</div>
  <div class="bottom">Butter</div>
</div>

CSS

.grid-container {
  width: 50%;
  margin: 1rem auto;
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: 1fr 1fr;
  gap: 0.25rem;
  grid-template-areas:
    "img top"
    "img bottom";
}

.grid-container div {
  border: 1px solid;
}

img {
  height: 100%;
}

.top,
.bottom {
  padding: 0.25rem;
}

.img { grid-area: img; }
.top { grid-area: top; }
.bottom { grid-area: bottom; }