JSFiddle - React, Tailwind, and code Playground

by Serge Zahharenko

HTML

<!DOCTYPE html>
<html>
<head>
</head>
<body>

<div class="grid-container">
  <div class="item2">Total</div>
  <div class="item3">STEPS</div>  
  <div class="item1">button</div>
</div>

</body>
</html>

CSS

@media screen and (min-width:768px) {

  .grid-container {
    display: grid;
    grid-template-columns: auto auto;
    gap: 10px;
  }


  .item1 {
    grid-column-start: 1;
    grid-column-end: 2;
  }
  .item2 {
    grid-column-start: 1;
    grid-column-end: 2;
  }
  .item3 {
    grid-column-start: 2;
    grid-row-start: 1;
    grid-row-end: span 2;  
  }
}