JSFiddle - React, Tailwind, and code Playground

HTML

<div class="wrapper">
  <div class="row">
    <div class="col">1</div>
  </div>
 <div class="row">
    <div class="col">2</div>
  </div>
  <div class="row">
    <div class="col">3</div>
  </div>
  <div class="row">
    <div class="col">4</div>
  </div>
  <div class="row">
    <div class="col">5</div>
  </div>
  <div class="row">
    <div class="col">6</div>
  </div>
</div>

SCSS

.wrapper {
  display: flex;
  flex-wrap: wrap;
  background-color: #000;
}

.row {
  width: 100%;
  &:nth-child(odd) {
    .col {
      background-color: #1c1c26;
      margin-right: auto;
    }
  }
  &:nth-child(even) {
    .col {
      margin-left: auto;
      background-color: #2b2d3c;
      text-align: right;
    }  
  }

}
.col {
  width: 100%;
  max-width: 50%;
  color: #fff;
}