I'm using a parent div which is a flexbox. inside it, i require two child divs, each spanning the complete width of the parent div (width:100%) such that they are on top of each other (overlayed). This way, when you change the width of one child div, it shouldn't re-position the other child div in any way.
for example: i'm trying to create an progress bar of sorts like below:
for this, i'm using two divs - the outer div (grey background) which renders the progress bar outline, and inner div (green background) which will show the progress. I also require to show the numerical percentage in the middle (81%). the inner div (green bg) width value will wary according to the numerical percentage. The numerical percentage should always be at the center of the OUTER DIV regardless of the progress (inner div width).
Could you please tell me how this can be achieved? Thanks.