js input değerinden dive aktarma

merhaba arkadaşlar inputa yazılan değeri divin style özelliklerine yansıtmak istiyorum nasıl yapabilirim
örnek olarak göstereyim
burada resim üzerindeki başlık yazısını x,y ve genişlik yükseklik değeri yazdıgımızda canlı olarak hareket ettirmek istiyoruz ücretli ücretsiz yardımlarınızı bekliyorum teşekkür ederim

https://codepen.io/F12/pen/PoBmxQq

 
 
$(".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;
}