Q:

Div overlay two sibling div who will fill parent

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

A:

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>

