JSFiddle - React, Tailwind, and code Playground

HTML

EXAMPLE A: RED and BLUE work as expected.
<div id="wrapper1">
 <div id="red">
 RED
 </div>
 <div id="blue">
 BLUE
 </div>
</div>
EXAMPLE B: Why is BLUE not 100% width like RED is?
<div id="wrapper2">
 <div id="yellow">
 YELLOW
 </div>
 <div id="red">
 RED
 </div>
 <div id="blue">
 BLUE
 </div>
</div>

CSS

#yellow {

    background:yellow;
    width:100px;
    height:200px;
    float:left;
}
#red {
    margin-left:150px;
    height:100px;
    background:#FF0000;
    /*overflow:hidden;/**/
}
#blue {
    margin-left:150px;
    height:100px;
    background:#00FFFF;
    overflow:hidden;/**/
}