JSFiddle - React, Tailwind, and code Playground

HTML

<div class="wrapper1">
  <div class="one">
    <img width="1200px" height="500" src="https://images.unsplash.com/photo-1459666644539-a9755287d6b0?ixlib=rb-0.3.5&ixid=eyJhcHBfaWQiOjEyMDd9&s=279b60ab483a2610d1e7260dc213898c&auto=format&fit=crop&w=828&q=80" alt="pic1">
  </div>


  <div class="two">
    <img height="300px" width="600px" src="https://images.unsplash.com/photo-1508182314998-3bd49473002f?ixlib=rb-0.3.5&ixid=eyJhcHBfaWQiOjEyMDd9&s=af394daae4bdbc4a95dc2204984b790d&auto=format&fit=crop&w=1350&q=80" alt="pic2">
  </div>
  <div class="three">
    <img height="300px" width="600px" src="https://images.unsplash.com/photo-1516703914899-e8303d01329a?ixlib=rb-0.3.5&ixid=eyJhcHBfaWQiOjEyMDd9&s=b544282e40e1ddee968dac7188ae9a3e&auto=format&fit=crop&w=1350&q=80" alt="pic3">
  </div>

</div>

CSS

.wrapper1 {
  display: grid;
  grid-column-gap: 1px;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: 200px;
}

.one {
  grid-column: 1/3;
  grid-row: 1;
  border: 2px dashed red;
}

.two {
  grid-column: 3;
  grid-row: 1;
  border: 2px dashed red;
}

.three {
  grid-column: 3;
  grid-row: 2;
  border: 2px dashed red;
}