JSFiddle - React, Tailwind, and code Playground

HTML

<script>
    window.onload=function(){
var x=parseInt(document.getElementsByTagName("div").length)
    x=x-1;
var y=Math.round(100/x);
var z=document.getElementsByClassName("innerDiv");
    for(var i=0;i<x;i++){
    z[i].style.height=y+"%";
    }

}
</script>

<div id="outerDiv">
 
    <div class="innerDiv">
        hello
    </div>
 <div class="innerDiv">
        hello
    </div>
</div>

CSS

#outerDiv
{
   min-height: 500px;
    height:500px;
   width:250px; /* or whatever width you want. */
   max-width:250px; /* or whatever width you want. */
border-style: solid;
    border-width: 2px;
  
}
.innerDiv{
    


   width:250px; /* or whatever width you want. */
   max-width:250px; /* or whatever width you want. */
border-style: solid;
    border-width: 1px;
    border-color: red;
    
}