$(".input").change(function(){
   
  var veri_x = $(".x").val();
  var veri_y = $(".y").val();
  var veri_genislik = $(".genislik").val();
  var veri_yukseklik = $(".yukseklik").val();
  
 
  $(".kutu").css({top: veri_x+"px"});
    $(".kutu").css({left: veri_y+"px"});
  
 $(".kutu").css("width",veri_genislik);
 $(".kutu").css("height",veri_yukseklik);

  });
  
 

<div class="kutu">
Matakon'un Kutusu
</div>

<div class="inputlar">
 <input type="text" class="input x" placeholder="X">
  <input type="text" class="input y" placeholder="Y">
  <input type="text" class="input genislik" placeholder="Genişlik">
  <input type="text" class="input yukseklik" placeholder="Yükseklik">
</div>

.kutu{
  position: absolute;
  top:10px;
  left:10px;
  background:#ffa900;
  width:200px;
  height:200px;
  display:grid;
  align-items:center;
  font-family:arial;
  text-align:center;
  font-weight:700;
  transition:.5s all; 
}

.inputlar{
  position: fixed;
  right:10px;
  top:10px;
}

.input{
  display:grid;
  margin-bottom:5px;
}