JSFiddle - React, Tailwind, and code Playground

HTML

<div class="wrapper">
    <div class="inner">
        text
    </div>
</div>

<div class="wrapper">
    <div class="inner">
        text<br>
        text<br>
        text<br>
        text<br>
        text<br>
        text<br>
        text<br>
        text<br>
    </div>
</div>

CSS

.wrapper {
    width: 50%;
    float: left;
    background: #ccc;
    height: 100px;
    position: relative;
}

.inner {
    width: 50%;
    position: absolute;
    min-height: 100%;
    top: 0;
    left: 50%;
    margin-left: -25%;
    background: orange;
}