JSFiddle - React, Tailwind, and code Playground

HTML

<div id='main'>
    <div id='d1'>
    </div>
    <div id='d2'>
    </div>
    <div id='d3'>
    </div>
</div>

CSS

div#main {
    margin:0;
    padding:0;
    background-color:orange;
    opacity:0.4;
    width:400px;
    height:100px;
    overflow:hidden;
    white-space:nowrap;
}

div#d1 {
   margin: 2px 0 0 2px;
   height:100%;
   padding:2px;
   display:inline-block;
   opacity:0.7;
   background-color:red;
   width :150px;
}

div#d2 {
   margin: 2px 0 0 2px;
   height:100%;
   padding:2px;
   display:inline-block;
   opacity:0.7;
   background-color:blue;
   width :150px;
}

div#d3 {
   margin: 2px 0 0 2px;
   height:100%;
   padding:2px;
   display:inline-block;
   opacity:0.7;
   background-color:green;
   width :90px;
}