HTML/CSS Fill div with color from right to left and left to right

I'm trying to make my own bar chart which i imported it to pdf using Dom PDF. i have minus number on my result so i need to fill my bar from right to left. This is my current code right now

<td width="400px">
                <div style="width:100%; margin-bottom: 2px; margin-top:10px;">
                    <div
                        style="width:50%;display:inline-block;text-align:right">
                        <div class="w3-light-grey w3-round-large"
                            style="margin-bottom: 2px; margin-top:2px;text-align:right;">
                            <div class="w3-container w3-blue w3-round-large"
                                style="width:40%;text-align:right;float:right">0</div>
                        </div>
                    </div>
                    <div
                        style="width:50%;display:inline-block;text-align:right">
                        <div class="w3-light-grey w3-round-large"
                            style="margin-bottom: 2px; margin-top:2px;text-align:left">
                            <div class="w3-container w3-blue w3-round-large"
                                style="width:50%;text-align:center;"></div>
                        </div>

                    </div>
                </div>

</td>

and the result goes like this.

Is it possible to achieve that? Thank you