JSFiddle - React, Tailwind, and code Playground

HTML

<div class="align_center">
    <div class="align_center_to_left">
        <div class="align_center_to_right">
            Ширина блока зависит от&nbsp;размера надписи. Ширина блока зависит от&nbsp;размера надписи.
        </div>
    </div>
    <div class="left"></div>
    <div class="right"></div>
</div>
<div style="height:2500px; background:green"></div>

CSS

body {
	margin: 0;
}
.align_center
{
position: relative;
width: 100%;
height: 100%;
top: 0;
bottom: 0;
}
.align_center:after
{
content: '';
display: block;
clear: both;
}
.align_center_to_left
{
position: relative;
right: 50%;
float: right;
}
.align_center_to_right
{
position: relative;
z-index: 1;
right: -50%;
top: 0;
height: 100%;
background: red;
}
.left {
	position: absolute;
	width: 50%;
	height: 100%;
	background: red;
	z-index: 0;
	height: 100%;
}
.right {
	position: absolute;
	width: 50%;
	height: 100%;
	background: red;
	z-index: 0;
	margin-left: 50%;
	top: 0;
	bottom: 0;
}