How to attach a progress bar as a border to div

In React I need to attach a linear progress bar as a bottom to div. I tried with a normal linear progress bar and attached the linear progress to the end of the div with the flex-end property. Below is the code sandbox link for my implementation.

Code Sandbox Link:-https://codesandbox.io/s/linear-progress-bar-forked-udhxqz

But my requirement is the div should be as per the below screenshot
.

How can I achieve the below div with HTML and CSS changes?I should implement using in ReactJS