status-line

<!DOCTYPE html>
<html>
<head>
    <title></title>
<style type="text/css">
*, *::after, *::before { box-sizing: border-box; }
.state-cell {
    display: flex;
    flex-direction: column;
    height: 100%;
    width: 100%;
    justify-content: space-around;
    position: relative;
}
.state-line {
    display: flex;
    width: 100%;
    height: 20%;
}
.state-line__col {
    display: flex;
    height: 50%;
    border-radius: .1875rem;
}
.state-top {
    background-color: rgba(130, 249, 142, 1);
    align-self: flex-start;
}
.state-bottom {
    background-color: rgba(255, 153, 128, 1);
    align-self: flex-end;
}
.state-info {
    display: flex;
    align-items: center;
    width: 100%;
    height: 40%;
    justify-content: center;
    color: #7f7f7f;
}
.state-interval {
    position: relative;
    height: 100%;
    width: 100%;
}
.state-line-interval {
    position: absolute;
    top: 0;
    width: .1rem;
    height: 100%;
    background: #eee;
}
.state-line-interval-text {
    position: absolute;
    top: 0;
    color: #555;
    font-size: .5rem;
    padding-left: .1875rem;
}

.test1 {
    height: 40px;
    width: 100px;
}
.test2 {
    height: 50px;
    width: 500px;
}
</style>
</head>
<body>


<div class="state-cell test1">
    <div class="state-line">
        <div class="state-line__col state-top" style="width: 80%;" title="80 минут"></div>
        <div class="state-line__col state-bottom" style="width: 20%;" title="20 минут"></div>
    </div>
    <div class="state-line">
        <div class="state-line__col state-bottom" style="width: 20%;" title="20 минут"></div>
        <div class="state-line__col state-top" style="width: 20%;" title="20 минут"></div>
        <div class="state-line__col state-bottom" style="width: 20%;" title="20 минут"></div>
        <div class="state-line__col state-top" style="width: 20%;" title="20 минут"></div>
        <div class="state-line__col state-bottom" style="width: 20%;" title="20 минут"></div>
    </div>

    <div class="state-line">
        <div class="state-line__col state-top" style="width: 80%;" title="80 минут"></div>
        <div class="state-line__col state-bottom" style="width: 20%;" title="20 минут"></div>
    </div>
    <div class="state-line">
        <div class="state-line__col state-top" style="width: 80%;" title="80 минут"></div>
        <div class="state-line__col state-bottom" style="width: 20%;" title="20 минут"></div>
    </div>

</div>

<div style="height: 10px;"></div>

<div class="state-interval test2">
    <div class="state-line-interval-text" style="left: 0;">00:00</div>

    <div class="state-line-interval" style="left: 10%;"></div>
    <div class="state-line-interval-text" style="left: 10%;">02:00</div>

    <div class="state-line-interval" style="left: 20%;"></div>
    <div class="state-line-interval-text" style="left: 20%;">04:00</div>

    <div class="state-line-interval" style="left: 30%;"></div>
    <div class="state-line-interval-text" style="left: 30%;">06:00</div>

    <div class="state-line-interval" style="left: 40%;"></div>
    <div class="state-line-interval-text" style="left: 40%;">08:00</div>

    <div class="state-line-interval" style="left: 50%;"></div>
    <div class="state-line-interval-text" style="left: 50%;">10:00</div>

    <div class="state-line-interval" style="left: 60%;"></div>
    <div class="state-line-interval-text" style="left: 60%;">12:00</div>

    <div class="state-line-interval" style="left: 70%;"></div>
    <div class="state-line-interval-text" style="left: 70%;">14:00</div>

    <div class="state-line-interval" style="left: 80%;"></div>
    <div class="state-line-interval-text" style="left: 80%;">16:00</div>

    <div class="state-line-interval" style="left: 90%;"></div>
    <div class="state-line-interval-text" style="left: 90%;">18:00</div>

    <div class="state-cell">
        <div class="state-info"></div>

        <div class="state-line">
            <div class="state-line__col state-bottom" style="width: 20%;" title="20 минут"></div>
            <div class="state-line__col state-top" style="width: 20%;" title="20 минут"></div>
            <div class="state-line__col state-bottom" style="width: 20%;" title="20 минут"></div>
            <div class="state-line__col state-top" style="width: 20%;" title="20 минут"></div>
            <div class="state-line__col state-bottom" style="width: 20%;" title="20 минут"></div>
        </div>

        <div class="state-line">
            <div class="state-line__col state-top" style="width: 80%;" title="80 минут"></div>
            <div class="state-line__col state-bottom" style="width: 20%;" title="20 минут"></div>
        </div>
    </div>
</div>

</body>
</html>