JSFiddle - React, Tailwind, and code Playground

HTML

<form id="left">
  <p><f2>Title</></p></f2>
  <input class="num-input" type="text" name="name" maxlength="3" size="3">
  <input class="button" type="submit" value="Add %">
</form>

<div>
        <select>
            <option value="choose">Choose Color</option>
            <option value="red">Red</option>
            <option value="green">Green</option>
            <option value="blue">Blue</option>
        </select>
    </div>

<form><f2><input type="text" id="input"> Amounts</form></f2>
<script>
  input.oninput = function() {
    result.innerHTML = input.value;
  };
</script>
<div class="container">
  <div class="progress"></div>
  <f1><div id="result"></f1></div>
  
    </div>
</div>

CSS

#result{
       text-align: center;
       margin-top: -26px;
       font-weight: bold;
    }
    
   #left{
       align: left;
       margin-top: -26px;
       font-weight: bold;
    }  

.container {
/* Permalink - use to edit and share this gradient: https://colorzilla.com/gradient-editor/#777c85+0,4a4a4a+100 */
background: rgb(119,124,133); /* Old browsers */
background: -moz-linear-gradient(top,  rgba(119,124,133,1) 0%, rgba(74,74,74,1) 100%); /* FF3.6-15 */
background: -webkit-linear-gradient(top,  rgba(119,124,133,1) 0%,rgba(74,74,74,1) 100%); /* Chrome10-25,Safari5.1-6 */
background: linear-gradient(to bottom,  rgba(119,124,133,1) 0%,rgba(74,74,74,1) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#777c85', endColorstr='#4a4a4a',GradientType=0 ); /* IE6-9 */

  border: 1px solid black;
  height: 30px;
  width: 326px;
  padding: 0;
  margin-left: 16px;
}
 f1 {
  color: white;
  font-family: "Verdana";
  font-size: 16px;
  -webkit-text-stroke: 0px black;
  text-shadow: 2px 2px black;
}


 f2 {
  color: black;
  font-family: "Verdana";
  font-size: 14px;
   font-weight: bold;
   font-style: italic;
  
}

.progress {
  padding: 0;
  margin: 0;
  color: white;
  font-family: "Verdana";
  font-size: 16px;
  /* Permalink - use to edit and share this gradient: https://colorzilla.com/gradient-editor/#f3c5bd+0,e86c57+50,e80408+51,fc0000+75,c72200+100 */
background: #f3c5bd; /* Old browsers */
background: -moz-linear-gradient(top,  #f3c5bd 0%, #e86c57 50%, #e80408 51%, #fc0000 75%, #c72200 100%); /* FF3.6-15 */
background: -webkit-linear-gradient(top,  #f3c5bd 0%,#e86c57 50%,#e80408 51%,#fc0000 75%,#c72200 100%); /* Chrome10-25,Safari5.1-6 */
background: linear-gradient(to bottom,  #f3c5bd 0%,#e86c57 50%,#e80408 51%,#fc0000 75%,#c72200 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f3c5bd',...

JavaScript

var button = document.querySelector('.button');


button.addEventListener('click', function(e) {
  e.preventDefault();
  var numInput = document.querySelector('.num-input').value;
  var progressNum = document.querySelector('.progress');
 
  
  progressNum.style.width = ((numInput / 100) * 326) + 'px';
  
  
});