JSFiddle - React, Tailwind, and code Playground

HTML

<html>
    
       <input type="submit" value="Add" />
    
    <br/>
    
    
<div id="mainHolder">

S    
saadasd
dadsad
    </br>
    </br>
    </br>
    </br>
    adasdadadadddas
</div>
    
    <script type="text/javascript" src="http://ajax.aspnetcdn.com/ajax/jquery/jquery-1.4.1.js"></script>
    

</html>

CSS

#mainHolder
{
    width: 400px;
    border-top: 3px solid orange;
    border-bottom: 3px solid red;
    border-left: 3px solid purple;
    border-right: 3px solid pink;
    height:auto; 
    border-radius: 2px;
}

.firstDiv
{
    float: left;
    display: inline;
    background-color: #f5B5f5;
    height:100px;
}

.secondDiv
{
    float: left;
    display: inline;
    background-color: #FF007F;
    height:100px;
}

.thirdDiv
{
    float: left;
    display: inline;
    background-color: Pink;
    height:100px;
}

JavaScript

$('input').click(function()
{
     var existingDirectChildrenDivCount = $('#mainHolder > div').size();
       
    
    
     if( existingDirectChildrenDivCount % 3 == 0)
     {
          $('#mainHolder').append ("<div class='firstDiv'> A  </div>")
     }

     if( existingDirectChildrenDivCount % 3 == 1)
     {
          $('#mainHolder').append ("<div class='secondDiv'> B </div>")
     }
             
     if( existingDirectChildrenDivCount % 3 == 2)
     {
          $('#mainHolder').append ("<div class='thirdDiv'> C  </div>")
     }
             
    
       
}       
);