JSFiddle - React, Tailwind, and code Playground

HTML

<div class="row">
    <div class="col col-1">1st</div>
    <div class="col col-2">2nd</div>
    <div class="col col-3">3rd</div>
    <div class="col col-4">4th</div>
</div>

CSS

html, body {
    height: 100%;
}

.row{
   width:100%; position: relative; margin:0; max-width: 400px; min-width: 300px;
    height: 100%;
}

.col {
    position:absolute;
    left:0px;
    top:0;
    bottom: 0;
    height:100%;
}

.col-1{
    background:#f1f1f1;
    width:55px;
}
.col-2{
    background:#ccc;
    left:55px;
    width: 25%;
}
.col-3{
    background:#e5e5e5;
    left:25%;
    width: 50%;
}
.col-4{
    background:#aaa;
    left:75%;
    width: 25%;
}