JSFiddle - React, Tailwind, and code Playground

by satantx

HTML

<div class="wrap">
   <div class="columns">
      <div class="column col-4">1</div>
      <div class="column col-8">1</div>
   </div>
</div>

CSS

*, *::before, *::after {
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  }
  
  * {
  outline: none;
  margin: 0;
  padding: 0px;
  }
  
  .wrap {
     width: 320px;
     padding: 0 20px;
     margin: 0 auto;
  }

.column {
  padding-left: 18px;
  padding-right: 18px;
}

.columns {
  margin-left: -18px;
  margin-right: -18px;
  display: flex;
  flex-wrap: wrap;
  }

.col-1 {
  width: 8.33333%; }

.col-2 {
  width: 16.66667%; }

.col-3 {
  width: 25.0%; }

.col-4 {
  width: 33.33333%; }

.col-5 {
  width: 41.66667%; }

.col-6 {
  width: 50.0%; }

.col-7 {
  width: 58.33333%; }

.col-8 {
  width: 66.66667%; }

.col-9 {
  width: 75.0%; }

.col-10 {
  width: 83.33333%; }

.col-11 {
  width: 91.66667%; }

.col-12 {
  width: 100.0%; }