JSFiddle - React, Tailwind, and code Playground

HTML

<div class="btn-container">
  <button id='btn-up'>Up</button>
  <button id='btn-down'>Down</button>
  <span class='text'>Y coordinate: <span id="yCoord"></span></span>
</div>



<div id="myItem" class="moveItem"></div>

CSS

body {
  margin: 0;
}

.text {
  font-family: arial;
  padding-left: 30px;
}

#myItem {
  background-color: red;
  height: 50px;
  width: 50px;
  margin-top: 0px;
  
}

.moveItem {
	transition: transform .25s ease-in-out;
}

.btn-container {
  position: absolute;
  top: 0;
  left: 100px;
}

JavaScript

const pixelDistance = 50;
var currentY = $('#myItem').position().top;

$('#yCoord').text(currentY);

$("#btn-up").on('click', function() {
  currentY = currentY - pixelDistance;

  $('#myItem').css('transform', 'translateY(' + currentY + 'px)');

  $('#yCoord').text(currentY);
});

$("#btn-down").on('click', function() {
  currentY = currentY + pixelDistance;

	$('#myItem').css('transform', 'translateY(' + currentY + 'px)');
  
  $('#yCoord').text(currentY);  
});