JSFiddle - React, Tailwind, and code Playground

HTML

<div id="all">
<div id="one">one</div>
<div id="two">two</div>
<div id="main">main para goes here main para goes here main para goes here main para goes here main para goes here main para goes here main para goes here main para goes here main para goes here main para goes here main para goes here main para goes here main para goes here </div>
</div>

CSS

div{
    outline:solid gray 1px;
}
#all{
    height: 300px;
}
#one{
    float: left;
    position:relative;
}
#two{
    float: right;
    position:relative;
}
#main{
    margin: 0 auto;
    width: 250px;
    position:relative;
}

JavaScript

function center(element){
            var all = $("#all");
            if(element.height()<all.height()){
                  element.css(
                      "top",
                      ((all.height()/2)-(element.height()/2))+"px"
                  );  
            }
}

center($("#one"));
center($("#two"));
center($("#main"));