JSFiddle - React, Tailwind, and code Playground

HTML

<div id="container">
            <div id="div1">div1 has fixed width</div>
            <div id="div2">div2 may or may not exist</div>
            <div id="div3">div3 - This div should take the remaining width whether div2 exists or not. (More text goes here) (More text goes here) (More text goes here) (More text goes here) (More text goes here) (More text goes here) (More text goes here) (More text goes here) (More text goes here) (More text goes here) (More text goes here) (More text goes here) (More text goes here) (More text goes here) (More text goes here) (More text goes here) (More text goes here) (More text goes here) (More text goes here) (More text goes here) </div>
    </div>



<br><div>The problem is that I want something that looks like this but keeping the div3 width flexible, since div2 may OR MAY NOT exist:</div><br>


    <div id="Fcontainer">
            <div id="Fdiv1">div1 has fixed width</div>
            <div id="Fdiv2">div2 may or may not exist</div>
            <div id="Fdiv3">div3 - This div should take the remaining width whether div2 exists or not. (More text goes here) (More text goes here) (More text goes here) (More text goes here) (More text goes here) (More text goes here) (More text goes here) (More text goes here) (More text goes here) (More text goes here) (More text goes here) (More text goes here) (More text goes here) (More text goes here) (More text goes here) (More text goes here) (More text goes here) (More text goes here) (More text goes here) (More text goes here) </div>
    </div>

CSS

#container {
    width: 675px;
    padding: 5px;
}

#div1 {
    background:#FCF;
    height: 100px;
    width: 35px;
    margin-right:5px;
    float:left;
}

#div2{
    background: #CEDBFF;
    height:100px;
    width:100px; 
    float:left;
    margin-right: 5px;
}

#div3{
    display:block;
    background: #CCC;
}



/*CSS FOR THE EXAMPLE, DO NOT TAKE THIS INTO ACCOUNT */

#Fcontainer {
    width: 675px;
    padding: 5px;
}

#Fdiv1 {
    background:#FCF;
    height: 100px;
    width: 35px;
    margin-right:5px;
    float:left;
}

#Fdiv2{
    background: #CEDBFF;
    height:100px;
    width:100px;
    float:left;
    margin-right: 5px;
}

#Fdiv3{
    width: 530px;
    float:left;
    background: #CCC;
}