JSFiddle - React, Tailwind, and code Playground

HTML

<div class="div1"><div class="div2">vertical</div>

CSS

.div1
{
height:50px;
background-color: red;
position:relative;    
}
.div2
{
    border: 1px solid;
    background-color: orchid;
    text-decoration: none;
    letter-spacing: 1px;
    text-transform:uppercase;
    padding: 5px;
    position: absolute;
    right:5%;
    top:0%
    
}

JavaScript

jQuery(document).ready(function(){
var l=jQuery('.div1').height();
var level=l/2;
var bt=jQuery('.div2').height()/2;
   
var val=level-bt-parseInt(jQuery('.div2').css('padding-top'));
jQuery('.div2').css("margin-top",val);
});