JSFiddle - React, Tailwind, and code Playground

by CyberAP

HTML

<div class="container w0">
    <div class="title">0%</div>
    <div>
        <div class="leftBlock">1 1 1 1</div>
        <div class="rightBlock">1 1 1 1</div>
    </div>
    <div>
        <div class="leftBlockMWC">1 1 1 1</div>
        <div class="rightBlock100">1 1 1 1</div>
    </div>
</div>
<div class="container w1">
    <div class="title">1%</div>
    <div>
        <div class="leftBlock">1 1 1 1</div>
        <div class="rightBlock">1 1 1 1</div>
    </div>
    <div>
        <div class="leftBlockMWC">1 1 1 1</div>
        <div class="rightBlock100">1 1 1 1</div>
    </div>
</div>
<div class="container w2">
    <div class="title">2%</div>
    <div>
        <div class="leftBlock">1 1 1 1</div>
        <div class="rightBlock">1 1 1 1</div>
    </div>
    <div>
        <div class="leftBlockMWC">1 1 1 1</div>
        <div class="rightBlock100">1 1 1 1</div>
    </div>
</div>
<div class="container w3">
    <div class="title">3%</div>
    <div>
        <div class="leftBlock">1 1 1 1</div>
        <div class="rightBlock">1 1 1 1</div>
    </div>
    <div>
        <div class="leftBlockMWC">1 1 1 1</div>
        <div class="rightBlock100">1 1 1 1</div>
    </div>
</div>
<div class="container w4">
    <div class="title">4%</div>
    <div>
        <div class="leftBlock">1 1 1 1</div>
        <div class="rightBlock">1 1 1 1</div>
    </div>
    <div>
        <div class="leftBlockMWC">1 1 1 1</div>
        <div class="rightBlock100">1 1 1 1</div>
    </div>
</div>
<div class="container w5">
    <div class="title">5%</div>
    <div>
        <div class="leftBlock">1 1 1 1</div>
        <div class="rightBlock">1 1 1 1</div>
    </div>
    <div>
        <div class="leftBlockMWC">1 1 1 1</div>
        <div class="rightBlock100">1 1 1 1</div>
    </div>    </div>
</div>
<div class="container w6">
    <div class="title">6%</div>
    <div>
        <div class="leftBlock">1 1 1 1</div>
        <div class="rightBlock">1 1 1 1</div>
    </div>
    <div>
        <div...

CSS

.container
{
    padding: 10px;
    margin: 10px auto;
    background: rgb(255,240,240);
}

.title { 
    text-align: center;
    position: relative;
}

.title:before { 
    content: "actual % width";
    height: 20px;
    display: inline-block;
    vertical-align: bottom;
    white-space: nowrap;
    background: red;
    position: absolute;
    left: 0;
}

.leftBlock, .rightBlock, .leftBlockMWC, .rightBlock100
{
    display: table-cell;
    vertical-align: top;
}

.leftBlock
{
    word-wrap: break-word;
    overflow: hidden;
    background: rgb(240,255,255);
}

.leftBlockMWC
{
    background: rgb(100,200,200);        
}

.rightBlock
{
    background: rgb(200,200,200);
}

.rightBlock100 { 
    width: 100%;
    background: #eee;
}

.w0 .leftBlock { width: 0%; }
.w1 .leftBlock { width: 1%; }
.w2 .leftBlock { width: 2%; }
.w3 .leftBlock { width: 3%; }
.w4 .leftBlock { width: 4%; }
.w5 .leftBlock { width: 5%; }
.w6 .leftBlock { width: 6%; }

.w0 .title:before { width: 0%; }
.w1 .title:before { width: 1%; }
.w2 .title:before { width: 2%; }
.w3 .title:before { width: 3%; }
.w4 .title:before { width: 4%; }
.w5 .title:before { width: 5%; }
.w6 .title:before { width: 6%; }