JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div style="position:relative;">
  <div class="fill">
    <span>Expert</span>
  </div>
  <img class="mask" src="https://static.licdn.com/scds/common/u/img/pic/pic_profile_strength_mask_90x90_v2.png"></img>
</div>

CSS

.fill {
      position: absolute;
      top: 90px;
      left: 0;
      height: 0px;
      width: 90px;
      background-color: green;
    }
    .mask {
      display: block;
      height: 90px;
      left: 0;
      position: absolute;
      top: 0;
      width: 90px;
      overflow:hidden;
    }
    
    .fill:before{
      content: '';
      width: 150px;
      height: 1px;
      background: #000;
      display: inline-block;
      position: absolute;
      right: -140px;
      z-index: 999;
      text-align: right;
      vertical-align: top;
    }
    
    .fill span{
      position: absolute;
      right: -140px;
      top: -20px;
    }

JavaScript

function fillMeter(percent) {
      var pixels = (percent/100) * 90;
      $(".fill").css('top', (90-pixels) + "px");
      $(".fill").css('height', pixels + "px");
}

fillMeter(82);