JSFiddle - React, Tailwind, and code Playground

HTML

<br />
<hr />
<br />

<div class="fixed-para-size">
    <p>
I am a very big paragraph I am a very big paragraph I am a very big paragraph I am a very big paragraph I am a very big paragraph I am a very big paragraph I am a very big paragraph I am a very big paragraph I am a very big paragraph I am a very big paragraph I am a very big paragraph I am a very big paragraph I am a very big paragraph I am a very big paragraph I am a very big paragraph I am a very big paragraph I am a very big paragraph I am a very big paragraph I am a very big paragraph I am a very big paragraph    
    </p>
</div>

<br />
<hr />
<br />



<div class="table-cell"><p>I am a very big paragraph I am a very big paragraph I am a very big paragraph I am a very big paragraph I am a very big paragraph I am a very big paragraph I am a very big paragraph I am a very big paragraph I am a very big paragraph I am a very big paragraph I am a very big paragraph I am a very big paragraph I am a very big paragraph I am a very big paragraph I am a very big paragraph I am a very big paragraph I am a very big paragraph I am a very big paragraph I am a very big paragraph I am a very big paragraph</p></div>
<br />
<hr />
<br />



<div class="unknown-para-and-div-size">
    <p>
        <b>Thsi is not a perfect way.....requires some updation</b><br />I am a very big paragraph I am a very big paragraph I am a very big paragraph I am a very big paragraph I am a very big paragraph I am a very big paragraph I am a very big paragraph I am a very big paragraph I am a very big paragraph I am a very big paragraph I am a very big paragraph I am a very big paragraph I am a very big paragraph I am a very big paragraph I am a very big paragraph I am a very big paragraph I am a very big paragraph I am a very big paragraph I am a very big paragraph I am a very big paragraph
    </p>
</div>

CSS

html, body {
    height:100%;
    width:100%;
    margin:0;
    padding:0;
}
div {
    border:1px solid red;
}

div.unknown-para-and-div-size{
    height:100%;
    position:relative;
    top:0;
    bottom:0;
    border:1px solid green;
}

div.unknown-para-and-div-size > p{
    position:absolute;
    top:25%;
}



div.table-cell {
    height:400px;
    width:100%;
    display:table-cell;
    vertical-align:middle;   /* key here */
}




.fixed-para-size{
    height:600px;
}
.fixed-para-size > p{
    height:250px;
    margin-top:175px;
}