JSFiddle - React, Tailwind, and code Playground

HTML

<div id="wrapper" style="background-color:yellow;height:100%;">
    <div style="width:50px;height:100%;display:inline-block;">
        <div class="fluid-column" style="height:80%;background-color:green;">
            <div style="background-color:#ff99cc;height:25%;"> <span></span>1</div>
            <div style="background-color:#ff33cc;height:50%;"><span></span>2</div>
            <div style="background-color:#ff66cc;height:25%;"><span></span>3</div></div>      
        <div class="fix-column" style="height:20%;background-color:violet">
            <div style="background-color:orange;height:50%;"> <span></span>Total</div>
            <div style="background-color:white;height:50%;"><span></span>Test</div>
        </div>
    </div>
    <div style="width:50px;height:100%;display:inline-block;">
        <div class="fluid-column" style="height:80%;background-color:green;">
            <div style="background-color:#ff99cc;height:25%;"> <span></span>1</div>
            <div style="background-color:#ff33cc;height:50%;"><span></span>2</div>
            <div style="background-color:#ff66cc;height:25%;"><span></span>3</div></div>      
        <div class="fix-column" style="height:20%;background-color:violet">
            <div style="background-color:orange;height:50%;"> <span></span>Total</div>
            <div style="background-color:white;height:50%;"><span></span>Test</div>
        </div>
    </div>
</div>

CSS

body, html {
    width:100%;
    height:100%;
    margin:0;
    padding:0;
}


div {
    text-align:center;
}
div span {
    display:inline-block;
    height:100%;
    vertical-align:middle;
    
}