JSFiddle - React, Tailwind, and code Playground

by Nevear

HTML

<div class="wraper">
  
  <div class="i1">item 1</div>
  <div class="i2">item 2</div>
  <div class="i3">item 3</div>
  <div class="i4">item 4</div>
  <div class="i5">item 5</div>
  
  
</div>

CSS

.wraper{
  width:100%;
display:grid;
grid-template-columns:repeat(2,1fr);
grid-template-rows:repeat(5,200px);
grid-gap:20px;
}

.i1 {background-color:red;}
.i2 {background-color:green;}
.i3 {background-color:yellow;}
.i4 {background-color:black;}
.i5 {background-color:grey;}

.wraper div:nth-child(1){
  grid-column:1/-1;

}
.wraper div:nth-child(2){
  grid-column-start:1;
  grid-row-start:2;
  grid-row-end:5;
}