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

>Solution :

I was able to get your example working with a few CSS changes, below are the only two parts I needed to change:

.App {
  overflow: hidden;
}

.emptyProgressBar {
  border-radius: 0px;
}

.fillingProgressBar {
  width: 102%;
}

Then in App.tsx, change your left style to -101, like the following:

left: props.percent - 101 + "%",

A working example forked from your sandbox is available here.