JSFiddle - React, Tailwind, and code Playground

HTML

<div class="row">
    <div class="col-md-7">Here 1</div>
    <div class="col-md-3">Here 2</div>
    <div class="col-md-2">Here 3</div>
</div>

SCSS

$width = 100%;
$max-col = 12;

.row {
    width: $width;
}

.bor {
    margin: 0;
    padding: 0;
}

.col-md-1 {
    display: inline-block;
    width: percentage((1 / 12))
}

.col-md-2 {
    display: inline-block;
    width: percentage((2 / 12));
}

.col-md-3 {
    display: inline-block;
    width: percentage((3 / 12));
}
.col-md-4 {
    display: inline-block;
    width: percentage((4 / 12))
}

.col-md-5 {
    display: inline-block;
    width: percentage((5 / 12))
}

.col-md-6 {
    display: inline-block;
    width: percentage((6 / 12))
}

.col-md-7 {
    display: inline-block;
    width: percentage((7 / 12));
}

.col-md-8 {
    display: inline-block;
    width: percentage((8 / 12))
}

.col-md-9 {
    display: inline-block;
    width: percentage((9 / 12))
}

.col-md-10 {
    display: inline-block;
    width: percentage((10 / 12))
}

.col-md-11 {
    display: inline-block;
    width: percentage((11 / 12))
}

.col-md-12 {
    display: inline-block;
    width: percentage((12 / 12))
}