JSFiddle - React, Tailwind, and code Playground

HTML

<div class="red">   
    <div class="blue">
        texttexttexttexttext
    </div>
    <div class="centered">
        Centered Container of fixed width
    </div>    
</div>
<br/>
The pink and light geen line mark centers of the containers. These lines should align untill green meets blue container.

CSS

.red {
    height: 100px;
    text-align: center;
    border: 3px solid red;
    position: relative;
    background: linear-gradient(to right, #ffffff 0%,#ffffff calc(50% - 2px),#ffc6c6 50%,#ffffff calc(50% + 2px),#ffffff 100%);
}
.blue {
    background: blue;
    height: 100%;
    float: left;
}
.centered {
    display:inline-block;
    height: 50px;
    border: 3px solid green;
    position: absolute;
    left: calc(50% - 73px);
    width: 140px;
    top: 0;
    background: linear-gradient(to right, #ffffff 0%,#ffffff calc(50% - 2px),#BBEDB8 50%,#ffffff calc(50% + 2px),#ffffff 100%);
}