How to resize group of <div> to appear in same line if they are more than 2?

Question

When I have just 2 <div> I want each one to have same width but I want to make them smaller when I will have a 3rd <div> to stay on same line.

But when I'll have a 4th <div>, I will go back to first width (same as when I have just 2 <div>) and will have two lines, in each line 2 <div>

Do I need Javascript to perfom it ? any other way just using HTML/CSS ?

Here is my html and css for 3 div :

.bigBox{
  width:100px;
  height:50px;
  background: red;
}

.A{
   width: 40%;
   height: 50%;
   float: left;
   background: blue;
   margin-left:5px;
 }

<div class="bigBox">
   <div class="A a">

   </div>
   <div class="A b">

   </div>
  <div class="A c">

  </div> 
</div>