JSFiddle - React, Tailwind, and code Playground
HTML
<div class="div1">
<div class="div2">vertical</div>
CSS
* {
margin: 0;
padding: 0;
}
.div1 {
height:100px;
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').outerHeight();
var level = l / 2;
var bt = jQuery('.div2').outerHeight() / 2;
var val = level - bt;
jQuery('.div2').css("margin-top", val);
});