title: If two div cant fit next to each other, how can I stretch them 100%?
body: <p><a href="https://jsfiddle.net/eLta8p4y/" rel="nofollow noreferrer">https://jsfiddle.net/eLta8p4y/</a></p>
  
  <pre><code>&lt;div id="a"&gt;left, left, left, left div&lt;/div&gt;
  &lt;div id="b"&gt;right, right, right, right div&lt;/div&gt;
  &lt;div style="clear: both;"&gt;&lt;/div&gt;
  &lt;hr&gt;
  This is how I want it to look alike, when the 2 divs above gets enforced to different lines:
  &lt;div id="a2"&gt;left, left, left, left div&lt;/div&gt;
  &lt;div id="b2"&gt;right, right, right, right div&lt;/div&gt;
  
  #a
  {
      background-color: red;
      float: left;
  }
  
  #b
  {
      background-color: green;
      float: right;
  }
  
  #a2
  {
      background-color: red;
  }
  
  #b2
  {
      background-color: green;
  }
  </code></pre>
  
  <p>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%</p>
  
  <p><img src="https://i.stack.imgur.com/no6Bf.png" alt="enter image description here"></p>