JSFiddle - React, Tailwind, and code Playground

HTML

<html>

  <head>
  </head>

  <body>
    <div class="wrapper">
      <div class="grid">
        <div>
          R1C1
        </div>
        <div>
          R1C2
        </div>
        <div>
          R2C1
        </div>
        <div>
          R2C2
        </div>
        <div class="button">
          Button
        </div>
      </div>
    </div>
  </body>

</html>

CSS

.wrapper {
  border: 1px solid blue;
  height: 300px;
  width: 250px;
  padding: 10px;
}

.grid {
  width: 100%;
  height: 100%;
  display: grid;
  grid-template-columns: 100px auto;
  grid-auto-rows: min-content;
  row-gap: 7px;
  justify-items: start;
  align-items: start;
}

.button {
  grid-column: 1 / -1;
  justify-self: end;
  align-self: end;
}