JSFiddle - React, Tailwind, and code Playground

HTML

<div class="app-container">
  <div class="info">
    <div class="image-box">
      <div>demo item 1</div>
      <div><img src="https://images.unsplash.com/photo-1482003297000-b7663a1673f1?ixlib=rb-1.2.1&q=85&fm=jpg&crop=entropy&cs=srgb&ixid=eyJhcHBfaWQiOjE0NTg5fQ">
      </div>
      <div>demo item 2</div>
    </div>
  </div>
</div>

CSS

.image-box {
  height: 50vh;
  border: 2px solid red;
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  grid-template-rows: 1fr 1fr 1fr;
  grid-template-areas: 
    " demo1 image demo2 "
    " demo1 image demo2 "
    " demo1 image demo2 ";
}

.image-box > div:first-child {
  grid-area: demo1;
  background-color: lightgreen;
}

.image-box > div:nth-child(2) {
  grid-area: image;
  min-width: 0;
}

img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.image-box > div:last-child {
  grid-area: demo2;
  background-color: aqua;
}

.app-container {}
.info {}