JSFiddle - React, Tailwind, and code Playground

HTML

<div class="columns">
    <div>
        You think water moves fast? You should see ice. It moves like it has a mind. Like it knows it killed the world once and got a taste for murder.
    </div>
    <div>
        After the avalanche, it took us a week to climb out. Now, I don't know exactly when we turned on each other, but I know that seven of us survived the slide... and only five made it out. 
    </div>
    <div>
        Now we took an oath, that I'm breaking now. We said we'd say it was the snow that killed the other two, but it wasn't.
    </div>
    <div>
        Nature is lethal but it doesn't hold a candle to man.
     </div>
</div>

SCSS

.columns > div {
  padding: 20px;
  min-height: 1px;
  box-sizing: border-box;
  
  @media (min-width: 500px) {
    width: 50%;
    &:nth-of-type(odd) {
      float: left;
    }
    &:nth-of-type(even) {
      float: right;
    }
  }
        
  // Couple of colours
  &:nth-of-type(1) { background-color: #2188d8}
  &:nth-of-type(2) { background-color: #8d21d9}
  &:nth-of-type(3) { background-color: #21d977}
  &:nth-of-type(4) { background-color: #d92186}
  &:nth-of-type(5) { background-color: #d9d321}
  &:nth-of-type(6) { background-color: #d93321}
  
  // Identifiers
  counter-increment: item;
  &::before {
    content: counter(item);
  }
}