Html Div覆盖将填充父Div的两个兄弟Div

我有4个div，看起来像这样

期望输出：

当前代码：

<div class="center aligned" style="width: 100%;height: 7em; padding: 2em; position:absolute;">
    <div class="ui small grey label fluid progress_padding_top_bottom" style="z-index:1;height: 7em; border-radius: 0; padding-right: 0; padding-left: 0; background-color: #E8E8E8 !important;">
    <div style="background-color: #21BA45; width: 5%; height: 7em; float:left;"></div>
    <div style="background-color: #ffdd00; width: 20%; height: 7em; float:left;"></div>
    <div style="width: 100%;" class="center aligned">ABC</div>
</div>

基础知识

---

更新：这是进度条的一部分，所以红色和黄色的宽度都会改变，这会产生你想要输入的内容

基础知识

将彩色div包装在自己的容器中，并将其绝对放置在内容下方

*{
框大小：边框框；
保证金：0；
填充：0；
}
.包装纸{
宽度：50%；
保证金：1em自动；
背景：浅灰色；
高度：7公分；
显示器：flex；
证明内容：中心；
对齐项目：居中；
位置：相对位置；
字体大小：粗体；
}
.内容{
位置：相对位置；
z指数：1；
}
.底垫{
位置：绝对位置；
排名：0；
左：0；
宽度：100%；
身高：100%；
溢出：隐藏；
}
瑞德先生{
身高：100%；
背景：红色；
宽度：25%；
浮动：左；
}
黄先生{
身高：100%；
背景：黄色；
浮动：左；
宽度：25%；
}

基础知识

当红色宽度增加时，ABC的div被推到末尾。我只需要确保ABC停留在中间，而红色和黄色都像进度条一样工作。

<div class="center aligned" style="width: 100%;height: 7em; padding: 2em; position:absolute;">
        <div style="background-color: red; width: 15%; height: 7em; float:left; margin: auto;"></div>
        <div style="background-color: #ffdd00; width: 15%; height: 7em; text-align: center; vertical-align: middle; line-height: 7em; float:left; margin: auto;">ABC</div>
        <div class="ui small grey label fluid progress_padding_top_bottom" style="z-index:1;height: 7em; border-radius: 0; padding-right: 0; padding-left: 0; background-color: #E8E8E8; float: left; width: 15%"></div>

    </div>