JSFiddle - React, Tailwind, and code Playground

by Softlink

HTML

<div><span class="one"></span></div>

<div><span class="two"></span></div>

<div><span class="three"></span></div>

CSS

div{
border: 1px solid #000;
    margin: 50px;
}

span{
display: block;
height: 30px;
border: 1px solid red;    
}

.one{
height: 50px;
}

.two{
height: 60px;
}

.three{
height: 70px;
}

JavaScript

$("div").each(function (){
      $(this).find('span').css({'margin-top' : - $(this).find('span').height()/2});
    });