JSFiddle - React, Tailwind, and code Playground

by Alexandre Simoes

HTML

<h3>No Break</h3>
<div>
    <div class="col-1">Col 1</div>
    <div class="col-1">Col 2</div>
    <div class="col-1">Col 3</div>
</div>

<h3>Break medium</h3>
<div>
    <div class="col-1 col-md-1">Col 1</div>
    <div class="col-1 col-md-2">Col 2</div>
    <div class="col-1 col-md-3">Col 3</div>
</div>

<h3>Break small</h3>

<div>
    <div class="col-1 col-sm-3">Col 1</div>
    <div class="col-1 col-sm-3">Col 2</div>
    <div class="col-1 col-sm-3">Col 3</div>
</div>

SCSS

.col-1 {
    border: solid 1px #000;
    width: 33%;
    float: left;
    box-sizing: border-box;
}
.col-2 {
    border: solid 1px #000;
    width: 33%;
    float: left;
    box-sizing: border-box;
}
.col-3 {
    border: solid 1px #000;
    width: 33%;
    float: left;
    box-sizing: border-box;
}

@media (max-width:761px) {
    .col-md-1 {width: 33%;}
    .col-md-2 {width: 66%;}
    .col-md-3 {width: 99%;}
}

@media (max-width:480px) {
    .col-sm-1 {width: 33%;}
    .col-sm-2 {width: 66%;}
    .col-sm-3 {width: 99%;}
}