<div class="grid-container">
  <div class="item1">
    <div class="inner">1) Col 1 row 1<br>
      test</div>
    <div class="inner">2) Col 1 row 2</div>
    <div class="inner">3) Col 1 row 3</div>
  </div>
  <div class="item2">
    <div class="inner">4) Col 2 row 1</div>
    <div class="inner">5) Col 2 row 2</div>
    <div class="inner">6) Col 2 row 3</div>
  </div>
</div>
.grid-container {
  display: grid;
  grid-template-columns: minmax(100px, 50%) minmax(100px, 50%);
  grid-template-areas: "grid1 grid2";
  grid-gap: 10px;
  background-color: #2196f3;
  padding: 10px;
  justify-content: center;
}
.grid-container > div {
  text-align: center;
  font-size: 30px;
}
.item1,
.item2 {
  grid-area: grid1;
  display: grid;
  grid-template-rows: 1fr;
}
.item2 {
  grid-area: grid2;
}
.inner {
  background-color: rgba(255, 255, 255, 0.8);
  padding: 20px 0;
  margin: 0 0 10px;
}
.inner:last-child {
  margin-bottom: 0;
}
Run Pen

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.