JSFiddle - React, Tailwind, and code Playground

by bejnar

HTML

<div class="grid">
  <div class="item-1">
    This is item 1
  </div>
  <div class="item-2">
    This is item two.
  </div>
</div>

<div class="grid grid--reversed">
  <div class="item-1">
    This is item 1 reversed?
  </div>
  <div class="item-2">
    This is item two reversed?
  </div>
</div>

SCSS

.grid {
  display: grid;
  grid-gap: 10px;
  grid-template-columns: repeat(12, 1fr);
}

.item-1 {
  border: 1px solid blue;
  grid-column-start: 1;
  grid-column-end: 7;
}

.item-2 {
  border: 1px solid orange;
  grid-column-start: 7;
  grid-column-end: 13;
}

.grid--reversed {
  .item-1 {
    grid-column-start: 9;
    grid-column-end: 10;
    grid-row-start: 1;
    grid-row-end: 1;
  }
  .item-2 {
    grid-column-start: 1;
    grid-column-end: 6;
    grid-row-start: 1;
    grid-row-end: 1;
  }
}