JSFiddle - React, Tailwind, and code Playground

HTML

<div class="container one">
    <div class="half">Hello there.</div>
</div>
<div class="container two">
    <div class="half">Hello there, you old dog.</div>
</div>
<div class="container three">
    <div class="half">Hello there you old dog. Been up to your old tricks?</div>
</div>

CSS

.container {
    position: absolute;
    overflow:auto;
}
.half {
    position: relative;
    right: 50%;
}
.two {
    top: 30px;
}
.three {
    top: 60px;
}