title: Allocate equal width to child elements with css
body: <p>I have a fixed-width area and, depending on the circumstances, I need to place either four divs or two.</p>
  
  <p>If I have two divs, it should look like this:</p>
  
  <p><img src="https://i.stack.imgur.com/7gqhn.png" alt="enter image description here"></p>
  
  <p>If I have four divs, it should look like this,</p>
  
  <p><img src="https://i.stack.imgur.com/eTclY.png" alt="enter image description here"></p>
  
  <p>Currently I'm placing four divs with a width of <code>25%</code>. How can I manage, with <code>CSS</code>, to set the condition: if I have two divs only, increase the div sizes to 50% per each to completely cover the intended area as four divs does.</p>
  
  <p><strong>Edit</strong></p>
  
  <p>Sometimes I don't want to display the orange colored area or <code>225%</code> area. In these cases, I need to stretch the yellow colored area and the <code>200%</code> area.</p>