If two div cant fit next to each other, how can I stretch them 100%?

Question

https://jsfiddle.net/eLta8p4y/

<div id="a">left, left, left, left div</div>
<div id="b">right, right, right, right div</div>
<div style="clear: both;"></div>
<hr>
This is how I want it to look alike, when the 2 divs above gets enforced to different lines:
<div id="a2">left, left, left, left div</div>
<div id="b2">right, right, right, right div</div>

#a
{
    background-color: red;
    float: left;
}

#b
{
    background-color: green;
    float: right;
}

#a2
{
    background-color: red;
}

#b2
{
    background-color: green;
}

So, the left and right div is OK, but sooner or later they will be enforced to new line. This is when I want to stretch them 100%

Answer 1

You can achieve this using flex, like so:

#container{
 display:flex;
 flex-wrap: wrap;
}
#a
{
 background-color: red;
 float: left;
 min-width:initial;
}
#b
{
 background-color: green;
 float: right;
}

<div id="container">
 <div id="a">left, left, left, left, left, left, left, left div</div>
 <div style="flex:1;"></div>
 <div id="b">right, right, right, right, right, right, right div</div>
</div>