JSFiddle - React, Tailwind, and code Playground

HTML

<div>
    <p>If you change the browser's zoom it starts to get bad values of 'left'</p>
<div class="block" id="block">#block</div>
</div>
<input type="button" value="<<" id="moveToLeft"/>
<input type="button" value=">>" id="moveToRight"/>
<br/>
<label>$('#block').css('left') : </label><input type="text" id="leftValue" />

CSS

.block{
    display:inline-block;
    width:100px;
    height:100px;
    position:relative;
    border:1px solid #000;
    text-align:center
}

JavaScript

function showLeftValue(){
    var leftValue = $('#block').css('left');
    $('#leftValue').val(leftValue);
}

$('#moveToLeft').click(function(){
    $('#block').animate({left: '-=50'}, 200, function(){
        showLeftValue();
    });
});

$('#moveToRight').click(function(){
    $('#block').animate({left: '+=50'}, 200, function(){
        showLeftValue();
    });
});

$().ready(function(){
    showLeftValue();
});