JSFiddle - React, Tailwind, and code Playground

HTML

<div class="l-cols">
    <div class="l-col-2">
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Cumque dignissimos optio at illo                 perspiciatis soluta enim magnam minima. Rerum eum sint repellendus nesciunt maiores unde officia tempora porro consequatur eos.</p>
    </div>
    <div class="l-col-2">
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Cumque dignissimos optio at illo                 perspiciatis soluta enim magnam minima. Rerum eum sint repellendus nesciunt maiores unde officia tempora porro consequatur eos.</p>
    </div>
    <div class="l-col-2">
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Cumque dignissimos optio at illo                 perspiciatis soluta enim magnam minima. Rerum eum sint repellendus nesciunt maiores unde officia tempora porro consequatur eos.</p>
    </div>
    <div class="l-col-2">
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Cumque dignissimos optio at illo                 perspiciatis soluta enim magnam minima. Rerum eum sint repellendus nesciunt maiores unde officia tempora porro consequatur eos.</p>
    </div>
    <div class="l-col-2">
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Cumque dignissimos optio at illo                 perspiciatis soluta enim magnam minima. Rerum eum sint repellendus nesciunt maiores unde officia tempora porro consequatur eos.</p>
    </div>
        <div class="l-col-2">
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Cumque dignissimos optio at illo                 perspiciatis soluta enim magnam minima. Rerum eum sint repellendus nesciunt maiores unde officia tempora porro consequatur eos.</p>
    </div>
</div>
<div class="l-cols">
    <div class="l-col-6">
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Cumque dignissimos optio at illo                 perspiciatis soluta enim magnam minima. Rerum eum sint repellendus nesciunt...

SCSS

// Variables
$cols: 12;
$max-wrapper-width: 920px;
$gutter-width: 20px;

// Mixin
@mixin col($col) {
    width: (($max-wrapper-width - $gutter-width*($cols/$col - 1))/($cols/$col))/$max-wrapper-width*100%;
}
@mixin groupfix {
  &:after {
    content: "";
    display: table;
    clear: both;
  }
}

// Loop to create the grid
@for $i from 1 through 12 {
    .l-col-#{$i} {
        @include col($i);
    }
}

// Styles
.l-cols {
  @include groupfix();

  margin-top: 20px;

  &:first-child {
    margin-top: 0;
  }
}
[class^="l-col-"] {
  box-sizing: border-box;
  float: left;
  padding: 0 1em;

  &:first-child {
    margin-left: 0;
  }
}