JSFiddle - React, Tailwind, and code Playground

HTML

<div>
    <p>some text</p>
</div>

CSS

div{display: table-cell; height: calc(100%-100px); vertical-align: middle;}
p{background-color: red; padding: 20px;}

JavaScript

// if you set height: 300px then you'll see what I'm saying
// I mean here height: {percent value} doesn't work, you can try , so wanted to use pixels