JSFiddle - React, Tailwind, and code Playground

HTML

<div class="container">
    <div id="child1" class="child">Test</div>
    <div id="child2" class="child">Test</div>   
    <div id="child3" class="child">Test</div>
    <div id="child4" class="child">Test</div>    
</div>

CSS

.container {
    background-color: green;
    border 1px solid black;
    height: 100px;
    width: 100%;
}

.child {
    float: left;
    height: 100%;
}

#child1 {
    background-color: yellow;
    width: 200px;
}

#child2 {
    background-color: blue;
    width: 100px;
}

#child3 {
   background-color: grey;
    width: 100px;
}

#child4 {
    background-color: magenta;
    width: 100px;
}