JSFiddle - React, Tailwind, and code Playground

HTML

<div class="grid">
  <div class="item left"></div>
  <div class="item left"></div>
  <div class="item right"></div>
  <div class="item right"></div>
  <div class="item left"></div>
</div>

SCSS

.grid {
  width: 200px;
  border: 1px solid green;
  display: grid;
  grid-template-columns: auto auto;
}

.item {
  width: 30px;
  height: 30px;
  margin: 5px;
  &.left {
    grid-column-start: 1;
    justify-self: start;
    background: red;
  }
  &.right {
    grid-column-start: 2;
    justify-self: end;
    background: blue;
  }
}