<div class="container">
  <h2>Testimonials</h2>
  <div class="grid-container">
    <div class="text">
      <div class="ratio"></div>
      <p>
        Lorem ipsum dolor sit amet consectetur adipisicing elit. Omnis sequi, quisquam dignissimos quas quia blanditiis adipisci autem tempore minima iste.
      </p>

      <p>Jacob Archibald</p>
      <p>Cofounder</p>
    </div>
    <div class="images">
      <img src="http://placehold.it/250x380" alt="">
    </div>
  </div>
</div>

.grid-container {
  font-famiy: sans-serif;
  display: grid;
  grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr 1fr;
  grid-template-rows: 1fr 1fr;
  gap: 0px 0px;
  grid-template-areas:
    ". text text . images images ."
    ". text text . images images .";
}
.text {
  grid-area: text;
  font-size: 12px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  height: 100%;
}
.images {
  grid-area: images;
}

.container {
  max-width: 640px;
  margin: auto;
}

.ratio {
  width: 120px;
}

let html = `
<svg viewBox="0 0 500 95" xmlns="http://www.w3.org/2000/svg" id="svg">
  <defs>
    <clipPath id="clip">
      <path d="M49,0 64,30 100,35 75,57 80,95 50,78 18,95 24,57 0,36 31,30 M100,36 133,30 149,0 164,30 200,36 175,57 180,95 152,78 119,95 124,60 M200,36 233,30 249,0 264,30 300,36 275,57 280,95 252,78 219,95 223,60 M300,36 333,30 349,0 364,30 400,36 375,57 380,95 352,78 319,95 324,60 M400,36 433,30 449,0 464,30 500,36 475,57 480,95 452,78 419,95 424,60" />
    </clipPath>
  </defs>
  <rect width="100%" height="100%" fill="#ccc" clip-path="url(#clip)" />
  <rect id="yellow" width="300px" height="100%" fill="yellow" clip-path="url(#clip)" id="ratio" />
</svg>`;

document.querySelector(".ratio").innerHTML = html;