JSFiddle - React, Tailwind, and code Playground

HTML

<div class="main">
  <div class="controls">
    <button class="move">move</button>
    <input type="number" placeholder="top" id="top" value="10" />
    <input type="number" placeholder="left" id="left" value="20" />
  </div>

  <div class="space">
    <button class="dynamic-btn">Dynamic button</button>
  </div>
</div>

CSS

.main {
  height: 100%;
}

.controls {
  height: 10%;
}

.space {
  height: 90%;
}

JavaScript

document.querySelector('.move').addEventListener('click', function () {
	var dynamicBtn = document.querySelector('.dynamic-btn');
  var top = document.querySelector('#top');
  var left = document.querySelector('#left');
  var right = document.querySelector('#right');
  var bottom = document.querySelector('#bottom');
  
  
  dynamicBtn.style.position = 'relative';
  dynamicBtn.style.top = top.value + 'px';
  dynamicBtn.style.left = left.value + 'px';
});