Div overlay two sibling div who will fill parent - html

Question

I have 4 div, which look something like this
Desired output:
Current code:
<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>
Update: This is a part of a progress bar, so both red and yellow width will change

Answer 1

Wrap the colored divs in their own container and position it absolutely unde rthe content.
* {
box-sizing: border-box;
margin: 0;
padding: 0;
}
.wrapper {
width: 50%;
margin: 1em auto;
background: lightgrey;
height: 7em;
display: flex;
justify-content: center;
align-items: center;
position: relative;
font-weight: bold;
}
.content {
position: relative;
z-index: 1;
}
.underlay {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
overflow: hidden;
}
.red {
height: 100%;
background: red;
width: 25%;
float: left;
}
.yellow {
height: 100%;
background: yellow;
float: left;
width: 25%;
}
<div class="wrapper">
<div class="content">ABC</div>
<div class="underlay">
<div class="red"></div>
<div class="yellow"></div>
</div>
</div>

Answer 2

This produces what you're trying to putput
https://jsfiddle.net/wcsfnbuL/
<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>