JSFiddle - React, Tailwind, and code Playground

HTML

<div class="Tiles">
    <div class="Item col1">
      bla<br>
      bla<br>
      bla<br>bla<br>
      bla<br>
      bla<br>
      bla<br>
      bla<br>bla<br>bla<br>
      bla<br>
      bla<br>
      bla<br>
      bla<br>bla<br>bla<br>
      bla<br>
      bla<br>
      bla<br>
    </div>
    <div class="Item">
        <img src="https://www.petshopsuk.co.uk/images/cat/390/cats.jpg" alt="">
    </div>
    <div class="Item">
    </div>
    <div class="Item col2">
    </div>
</div>

CSS

.Tiles {
    display: grid;
    overflow: hidden;
    grid-template-columns: 1fr 1fr 1fr;
    grid-template-rows: 50% 50%;
    grid-template-areas : "col1 mid1 col2"
                          "col1 mid2 col2";
    grid-auto-flow: column;
    gap: 10px;
}
.Item {
    background: red;
}
img {
  height: 100%;
}
.col1 {
    grid-area: col1;
}
.col2 {
    grid-area: col2;
}