JSFiddle - React, Tailwind, and code Playground
HTML
<div class="indicator">Style</div>
<div class="mainPanel">
<div>T</div>
<div></div>
<div>Speichern</div>
</div>
CSS
.indicator {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
position: absolute;
width: 300px;
text-align: center;
z-index: 10;
}
.mainPanel {
width: 300px;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
display: flex;
}
.mainPanel > div {
text-align: center;
padding: 0 10px;
white-space: nowrap;
border: solid 1px #999;
}
.mainPanel > div:nth-child(1) {
background: red;
}
.mainPanel > div:nth-child(3) {
background: lime;
}
.mainPanel > div:nth-child(2) {
background: yellow;
flex-grow: 1;
}