JSFiddle - React, Tailwind, and code Playground

by ibcaliax

HTML

<div class='container'>
    
    <div class='box red widthPercentValue'>
        I should take 75% of container width
    </div>
    
    <div class='box green widthPercentValue'>
        I should take 25% of container width
    </div>
    
</div>


<div class='container'>
    
    <div class='box red widthPxValue'>
        I shold take 200px width
    </div>
    
    <div class='box green widthPxValue'>
        I shold take 100px width
    </div>
</div>

CSS

div.container {
    display: -webkit-box;
	display: -moz-box;
	display: box;
        
    background: #CCC;
    margin: 10px;
    border: 4px solid blue;
    width: 400px;
    height: 100px;
}

div.container > div.box {
    /* Default box-flex-value is 0 so width attribute should be taken. */
    -webkit-box-flex: 0;
    -moz-box-flex: 0;
    box-flex: 0;
}

div.box.widthPercentValue.red {
    width: 75%;
}

div.box.widthPercentValue.green {
    width: 25%;
}

div.box.widthPxValue.red {
    width: 200px;
}

div.box.widthPxValue.green {
    width: 100px;
}


div.box.red {
    background-color: rgba(255,0,0,0.4);
}

div.box.green {
    background-color: rgba(0,128,0,0.4);
}