JSFiddle - React, Tailwind, and code Playground

HTML

<p>Small content:</p>
<div id="container" class="valign_outer">
    <div class="valign_inner">
        <p>How much content is in here?</p>
        <p>...</p>
        <p>Not much</p>
    </div>
</div>
<p>Big content:</p>
<div id="container" class="valign_outer">
    <div class="valign_inner">
        <p>How much content is in here?</p>
        <p>Lots</p>
        <p>And Lots</p>
        <p>And Lots</p>
        <p>And Lots</p>
        <p>And Lots</p>
        <p>And Lots</p>
        <p>And Lots</p>
        <p>And Lots</p>
        <p>And Lots</p>
        <p>And Lots</p>
        <p>And Lots</p>
        <p>And Lots</p>
        <p>And Lots</p>
        <p>And Lots</p>
        <p>I am going to be bigger than min height!</p>
    </div>
</div>

CSS

#container{
    border: 3px solid black;
    text-align:center;
    min-height: 200px;
}

.valign_outer{
}

.valign_inner{
}