JSFiddle - React, Tailwind, and code Playground

HTML

<div class="divClass">
    <span id="a" class="spanClass">A</span>
<span id="b" class="spanClass">B</span>
<span id="c" class="spanClass">C</span>
</div>
<br>
<div id="clickButton">CLICK BUTTON</div><br>

CSS

.spanClass {padding:25px; margin:10px; background:lime; display:inline-block; position:relative; left:10px }
.divClass {padding:5px; margin:10px; background:orange; display:inline-block; overflow:hidden;}

#clickButton {padding:20px; border: 1px solid #ddd; display:inline-block;cursor:pointer}

JavaScript

$('#clickButton').click(function() {
  $('.spanClass').animate({
    left: '+=200'
  }, 500, positionReset);
});

function positionReset(){
    alert('complete!');
   $('.spanClass').animate({'left':'-=200'})
}