JSFiddle - React, Tailwind, and code Playground

HTML

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

CSS

html, body {
height: 100%;
}
div{height: calc(100% - 100px);
 height: -moz-calc(100% - 100px);
 height: -webkit-calc(100% - 100px); vertical-align: middle; background-color: yellow;}
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