JSFiddle - React, Tailwind, and code Playground

HTML

<div class="container">
  <div class="image">image</div>
  <div class="title">title</div>
  <div class="description">description</div>
</div>

CSS

.container {
  display: grid;
  grid-template-areas: 'a a b b' 'a a c c' 'a a c c' 'a a c c';
}

.image {
  background-color: pink;
  grid-area: a;
  max-width: 60%;
  height: 300px;
}

.title {
  background-color: red;
  grid-area: b;
  max-width: 40%;
}

.description {
  background: lightblue;
  grid-area: c;
  max-width: 40%;
  height: 100%;
}

@media screen and (max-width: 768px) {
  .container {
    grid-template-areas: 'a a a a' 'b b b b' 'c c c c';
  }
  .image {
    grid-area: b;
    max-width: 100%;
  }
  .title {
    grid-area: a;
    max-width: 100%;
  }
  .description {
    grid-area: c;
    max-width: 100%;
  }
}