JSFiddle - React, Tailwind, and code Playground

by ibcaliax

HTML

<div class='main'>
    <div class='bar'>
        <div class='box red'></div>
        <div class='box green'></div>
    </div>
</div>

<div class='main'>
    <div class='bar'>
        <div class='box red'>adding text to this box makes it to work also in Firefox</div>
        <div class='box green'></div>
    </div>
</div>

CSS

div.main {
    margin: 20px;
    width: 400px;
    border: 4px solid blue;
}

div.bar {
    display: -webkit-box;
	display: -moz-box;
	display: box;
    background: #CCC;
    border: 4px solid yellow;
    
    width: 90%;
    height: 100px;
}

div.bar > div.box {
    width: 100px;
}

div.bar > div.box.red {
    background-color: rgba(255,0,0,0.2);
    font-size: 15px;
}

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