JSFiddle - React, Tailwind, and code Playground

HTML

<body>
    <div class="mainprogress">
        <div class="detailprogress" style="height:100%;width:18%">
            <div class="done" style="width:58%"></div>
            <div class="late" style="width:41%"></div>
        </div>
        <div class="detailprogress" style="height:35%;width:81%">
            <div class="done" style="width:73%"></div>
            <div class="todo" style="width:26%"></div>
        </div>
    </div>
</body>

CSS

.mainprogress {
    height:60px;
    border:2px solid black;
}
.mainprogress div{
    padding:0;
    margin:0;
    float: left;
}
.detailprogress div {
    height:100%;
}
.detailprogress .done {
    background-color:lightgreen;
}
.detailprogress .donelate {
    background-color:lightpink;
}
.detailprogress .late {
    background-color:red;
}
.detailprogress .todo {
    background-color:green
}