JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<select name="selection" id="selection">
  <option value="0%">Selected 0%</option>
  <option value="10%">Selected 10%</option>
  <option value="10%">Selected 10%</option>
  <option value="20%">Selected 20%</option>
  <option value="30%">Selected 30%</option>
  <option value="40%">Selected 40%</option>
  <option value="50%">Selected 50%</option>
  <option value="60%">Selected 60%</option>
  <option value="70%">Selected 70%</option>
  <option value="80%">Selected 80%</option>
  <option value="90%">Selected 90%</option>
  <option value="100%">Selected 100%</option>
</select>

<div id="mybar" class="progressbar">
    <div class="percentage" style="width:0">0%</div>
</div>

CSS

select {
  margin-bottom: 20px;
}
.progressbar {
  border:1px solid black;
  width:100px;
  height:20px;
  padding:1px;
}
.percentage {
  text-align: center;
  background:red;
  height: 100%;
  font-size:11px;
  line-height: 20px;
}

JavaScript

var bar = $('#mybar .percentage');

$('#selection').on('change', function () {
	var percent = this.value;
	bar.css('width', percent).text(percent);
});