I want to get the progress text to be inside the container progressish, even if the width is for an example 100%. As it is right now, the text is fixed to the right of the container, as seen in the first image below.
When the width of the progress bar is for an example 40%, it looks like this (as expected):
But when the progress is either 90% or 100%, I want the text to stuck to the far right of the progress bar, like this:
section#progressish {
width: 300px;
}
div#text {}
div#text>div {
margin-bottom: 5px;
margin-left: 100%;
min-width: 100px;
width: auto !important;
width: 100px;
}
div#progressbar {
background-color: #d1d1d1;
height: 10px;
margin-bottom: 15px;
width: 100%;
}
div#progressbar>.progress[data="bar"] {
background-color: #111111;
height: 10px;
margin-bottom: 15px;
width: 100%;
}<section id="progressish">
<div id="text">
<div>100% avklarat</div>
</div>
<div id="progressbar">
<div class="progress" data="bar"></div>
</div>
</section>How can I accomplish this? You can see the whole source code at jsFiddle: https://jsfiddle.net/a7buqqkk/.