JSFiddle - React, Tailwind, and code Playground

HTML

<div id="outside" runat="server">
            <div id="inside" style="width: 50%;" runat="server"></div>
        </div>

CSS

#outside {
    height: 18px;
    background-color: #cccacd;
    z-index: 5;
    position: relative; 
    border-style:solid;
    border-color:#24242d;
    border-width: 1px;
  }
  #inside {
    width: 0px;
    height: 100%;
    background-color: #0089cf;
    overflow: visible;
    color: white;
    white-space: nowrap;
    z-index: 10;
    position: relative; 
  }

JavaScript

function bindEvent(el, eventName, eventHandler) {
        "use strict";
        if (el.addEventListener) {
            // IE 9+, Chrome, Opéra, Safari, Firefox
            el.addEventListener(eventName, eventHandler, false);
    } else if (el.attachEvent) {
        // IE7, IE8
        el.attachEvent('on' + eventName, eventHandler);
    }
}

    var outside, inside;
    outside = $("#outside");    
    inside = $("#inside");
$("#outside").on('click', function (e) {
    var ofx =  e.offsetX==undefined?e.pageX:e.offsetX;
    var position = (ofx / outside.outerWidth()) * 100;
   
    if (position >= 0 && position <= 10) {
        inside.css("width", "0%");
    }
    if (position > 10 && position <= 35) {
        inside.css("width", "25%");
    }
    if (position > 35 && position <= 65) {
        inside.css("width", "50%");
    }
    if (position > 65 && position <= 85) {
        inside.css("width", "75%");
    }
    if (position > 85 && position <= 100) {
        inside.css("width", "100%");
    }
    });