JSFiddle - React, Tailwind, and code Playground

HTML

<div class="container no_shift">
    <div class="block-1">
    
    </div>
    <div class="block-center">
    
    </div>
</div>

CSS

:root, html
		{
			  font-size: 62.5%;
		}
body
		{
			  font-size: 1.6rem;
		}
body::after			/* служебный элемент, для отображения середины документа */
		{
			  content: '';
			  position: fixed;
			  top: 0;
			  left: 50%;
			  height: 100%;
			  width: 1px;
			  background: RGBA(85, 85, 85, .95);
			  z-index: 10;
			  pointer-events: none;
		}
.container
    {
        height: 100px;
        background: RGBA(128, 255, 160, .4);
    }
.no_shift
		{
			  font-size: 0;   /* убираем инлайн-эффекты у инлайн-блоков */
		}
.no_shift > *:not(.no_shift)
		{
			  font-size: 1.6rem;   /* возвращаем стандартный размер шрифта потомкам */
		}
.block-1, .block-center
    {
        display: inline-block;
    }
.block-1
    {
        height: 100%;
        width: 15rem;
        min-width: 150px;
        background: RGBA(128, 35, 85, .4);
    }
.block-center
    {
        height: 100%;
        width: 100px;
        background: RGBA(228, 48, 25, .4);
        background-clip: content-box;
        padding-left: calc(50% - 15rem);    /* тут может быть и 150px*/
    }