JSFiddle - React, Tailwind, and code Playground

by Cristian Marcel

HTML

<div class="row">
    <div class="col-half">Two</div>
    <div class="col-quarter">Column</div>
    <div class="col-quarter">Column</div>
</div>

CSS

.row { display: flex; }
.col { flex: 1; }
@media (max-width: 48em) {
    .row { flex-direction: column; }
    .col { flex: 0 0 auto; }
}

@media (min-width: 48em) {
  .col-tenth { flex: 0 0 10%; }
  .col-fifth { flex: 0 0 20%; }
  .col-quarter { flex: 0 0 25%; }
  .col-third { flex: 0 0 33.3333334%; }
  .col-half { flex: 0 0 50%; }
}

.col-half {
  background: blue;
}

.col-quarter {
  background: blue;
}

body {
  background: green;
}