JSFiddle - React, Tailwind, and code Playground

HTML

<section class="container">
  <div class="item1">item1</div>
  <div class="item2">item2</div>
  <div class="item3">item3</div>
  <div class="item4">item4</div>
</section>

CSS

.container {
          display: -ms-grid;
          display:     grid;
          -ms-grid-columns: 50px 50px 50px;
              grid-columns: 50px 50px 50px;
          -ms-grid-rows: 50px 50px;
              grid-rows: 50px 50px;
        }
        
        .container .item1 {
          -ms-grid-column: 1;
              grid-column: 1;
          -ms-grid-row: 1;
              grid-row: 1;
        }
        
        .container .item2 {
          -ms-grid-column: 2;
              grid-column: 2;
          -ms-grid-row: 1;
              grid-row: 1;
        }
        
        .container .item3 {
          -ms-grid-column: 1;
              grid-column: 1;
          -ms-grid-row: 2;
              grid-row: 2;
        }
        
        .container .item4 {
          -ms-grid-column: 2;
              grid-column: 2;
          -ms-grid-row: 2;
              grid-row: 2;
        }