JSFiddle - React, Tailwind, and code Playground

by mazlix

HTML

<div class="outer">
<div class="inner">
    <div class="box">
        wpfw efuiweh fuiwehf weuifh weuifh fuihwe fuihwefuiweh uwehf iuwehf uiwefhweuifh weuifhwe fuiweh fuiwehfuiwefh uiwefh weuifh weuifh weuifhwe uifh weuifhwefuiweh fuiweh fuiwehf iweufh weuih
    </div>
</div>
</div>

CSS

.box{
    width:200px;
    top:-5px; 
    
    position:relative;
    background:#444;
}
.inner {
    height:0px;
    width:0px;
    background:#444;
    top:50%;
    left:50%;
    right:50%;
    bottom:50%;
    position:relative;
}
.outer {
    height:200px;
    width:400px;
    border:2px dotted red;
}

JavaScript

function run(){
    $(".outer").css('height','30px');
}
$(function(){
    $(".box").css('top',-($(".box").height()/2));
    $(".box").css('left',-($(".box").width()/2));
});