JSFiddle - React, Tailwind, and code Playground

HTML

<div  class="clapet">
 <div id="clapet1">
 </div>
</div>
ouverture<input id="bar"type="text" value="" />%<br/>
<input id="foo" type ="button" value="go" />

CSS

.clapet {
  width :200px; 
  border: solid 1px grey;
  height: 200px;
  background-color : transparent;
}

#clapet1 {
  position: relative;
  height: 100%;
  background-color: grey;
  width:0;

  }

JavaScript

$(function(){

$("#foo").on( 'click', function(){
     ouverture= $('#bar').val();
     $("#clapet1").css("width", ouverture + "%")
})
})