JSFiddle - React, Tailwind, and code Playground

HTML

<div class="block">
    <div class="block-inner">
        <div class="block-item">
            <h2>Первый заголовок</h2>
            <p>Какой-то текст</p>
        </div>
        <div class="block-item">
            <h2>Второй заголовок</h2>
            <p>Какой-то текст</p>
        </div>
    </div>
</div>

CSS

.block{
    background: linear-gradient(to right, rgba(248,78,48,1) 0%, rgba(248,78,48,1) 45%, rgba(255,255,255,1) 45%, rgba(255,255,255,1) 55%, rgba(248,78,48,1) 55%, rgba(231,55,39,1) 100%);
    min-width:500px;
}
.block-inner{
    width:500px;
    margin:0 auto;
}
.block-inner:after{
    content:'';
	clear:both;
	display:table; 
}
.block-item{
    float:right;
    width:200px;
    text-align:center;
    color:#fff;
}
.block-item:first-child{
    float:left;
}