JSFiddle - React, Tailwind, and code Playground

HTML

<div class="wrapper">
  <div class="section section-a">A</div>
  <div class="section section-b">B</div>
  <div class="section section-c">C</div>
</div>

CSS

.wrapper {
  display: grid;
  grid-gap: 10px;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: [row1-start] auto [row2-start] auto [row2-end];
}

.section {
  padding: 20px;
  display: flex;
  align-items: center;
}
.section-a {
  height: 50px;
  background-color: green;
}  
.section-b {
  grid-row: row1-start / row2-end;
  grid-column: 2/-1;
  background-color: yellow;
}
.section-c {
  background-color: blue;
  height: 180px;
}