JSFiddle - React, Tailwind, and code Playground

by chandu bandu

HTML

<body onload="cssFunction()">
    <div id="parent">
		<div id="d1" class="child">Vertical alignment</div>
		<div id="d2" class="child">Vertical alignment</div>
		<div id="d3" class="child">Vertical alignment</div>
		<div id="d4" class="child">Vertical alignment</div>
		<div id="d5" class="child">Vertical alignment</div>
		<div id="d6" class="child">Vertical alignment</div>
		<div id="d7" class="child">Vertical alignment</div>
		<div id="d8" class="child">Vertical alignment</div>
</div>
      
    </body>

CSS

div#parent{
  max-height: 200px;
  width : 500px;
  padding : 0px;
  margin : 0px;
 }
 
.child{
	border:2px solid #a1a1a1;
 	width : 93%;
 	margin : 5% 0%;
 	height : 100%;
 }

JavaScript

function cssFunction(){
     		var elem = document.getElementsByClassName("child")
     		var len = elem.length;
     		var parent  = document.getElementById("parent");
     		var hight = parent.style.height;
     		for(var i=0;i<len;i++){
	     		elem[i].style.height =200/len;
     		}
     	}