Progress bar formating

[fafa]

Trying to do something like this.

The code below and some css result in image below.

<td>
 <div class="progress">
 <div class="progress-bar" role="progressbar" dmx-style:width="SHARE+'%'" dmx-style:background="partyColor"> {{SHARE+'%'}}
</div> </div>
</td>

Problem with mine is the full percentage value is not visible when the area is not wide enough.
I want the value to show irrespective of the area. I.E sit on top of all the backgrounds

my css code

.progress {

    height: 25px;

    overflow: hidden;

    background-color: #868686;

    text-align: center;

    border-radius: 0px;

}

.progress-bar {

    float: left;

    height: 100%;

    font-size: 12px;

    color: #fff;

    text-align: center;

   

}

[ben]

Move the value into a span with a class of progress-value as in
<span class="progress-value">{{SHARE+'%'}}</span>

and add CSS to position it:

.progress-value {
position: absolute;
right: 0;
left: 0;
}

Edit: The code will look like:

<div class="progress">
 <span class="progress-value">{{SHARE+'%'}}</span>
 <div class="progress-bar" role="progressbar" dmx-style:width="SHARE+'%'" dmx-style:background="partyColor">
</div> 
</div>

[fafa]

Thank @ben . the text is now above the background but not inside the progress bar. I added color to the css to see where it was.

[fafa]

got it to work with this modification to the css. I am grateful @ben

 .progress-value {
    position: absolute;
    right: 50px;
    color: white;
    padding-top: 5px;
    }