JSFiddle - React, Tailwind, and code Playground

HTML

<div class="bar">
    <div class="results_count">
        10%
    </div>
</div>
<p>
    <a href="#" id="withfix">start - with fix</a>
</p>
<p>
    <a href="#" id="wofix">start - w/o fix</a>
</p>

CSS

.bar {
    height: 20px;
    width: 200px;
    background-color: blue;
    position: relative;
}

.results_count {
    position: absolute;
    left: 220px;
}

JavaScript

$.Animation.prefilter(function (element, properties, options) {
    if (options.overrideOverflow) {
        
        $(element).css("overflow", options.overrideOverflow);
    }
});

var getSize = function() {
    return parseInt($(".bar").css("width")) - 20;
}

$("#withfix").click(function(e){
    $(".bar").animate({width: getSize()}, {
        duration: 2000,
        overrideOverflow: "visible"
    });
    return false;
});

$("#wofix").click(function(e){
    $(".bar").animate({width: getSize()}, {
        duration: 2000
    });
    return false;
});