JSFiddle - React, Tailwind, and code Playground

HTML

<div id="all">
    <div id="a"><div id="a1">25px</div></div>
    <div id="b"><div id="b1">200px</div></div>
    <div id="c">
        <div id="c1">
            <div id="c2a"><div id="c3a">100%</div></div>
            <div id="c2b"><div id="c3b">100%</div></div>
            <div id="c2c"><div id="c3c">100%</div></div>
        </div>
    </div>
</div>

CSS

DIV {
    font-size:10px;
}

DIV#all {
    display:table;
    width:500px;
    height:200px;
    border:1px dotted black;
    padding:5px;
}

DIV#a {
    display:table-cell;
    padding:5px;
    border:1px solid red;
}

DIV#a1 {
    width:25px;
    height:100%;
    border:1px dotted red;
    color:red;
}

DIV#b {
    display:table-cell;
    padding:5px;
    border:1px solid green;
}

DIV#b1 {
    width:150px;
    height:100%;
    border:1px dotted green;
    color:green;
}

DIV#c {
    display:table-cell;
    width:100%;
    padding:5px;
    border:1px solid blue;
}

DIV#c1 {
    display:table;
    width:100%;
    height:100%;
    color:blue;
}

DIV#c2a {
    display:table-row;
    border:1px dotted blue;
}

DIV#c3a {
    display:table-cell; 
    width:100%;
    border:1px dotted blue;
}

DIV#c2b {
    display:table-row;
}

DIV#c3b {
    display:table-cell;
    width:100%;
    border:1px dotted blue;
}

DIV#c2c {
    display:table-row;
}

DIV#c3c {
    display:table-cell;
    width:100%;
    border:1px dotted blue;
}