JSFiddle - React, Tailwind, and code Playground

HTML

<div class="GridCont">
  <div class="PostContent">
    <div class="PicContent pic1">
      <div class="cTextP">Picture #1</div>
    </div>
    <div class="Content box1">
      <div class="cTextP">Content #1</div>
    </div>
    <div class="PicContent pic2">
      <div class="cTextP">Picture #2</div>
    </div>
  </div>
</div>

CSS

.PostContent {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: 60vh 60vh;
  grid-gap: 1em;
  grid-template-areas: " pic1 box1 " 
                       " pic2 box1 ";
}

.box1 {
  grid-area: box1;
}

.pic1 {
  grid-area: pic1;
}

.pic2 {
  grid-area: pic2;
}

.PostContent { background: #B8E986; }
.PicContent  { background: blue; color: white; }
.Content     { background: #000000; color: white; }
.cTextP      { padding: 20px;}