JSFiddle - React, Tailwind, and code Playground

HTML

<div class="animation">
    <span class="item">
        ABCDEFHG
    </span>

</div>

CSS

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

div {
  background-color: #fff;
  display: inline-block;
  max-width: 0;
  overflow: hidden;
}

.animation {
  -webkit-transition: max-width .5s ease-in-out;
  -moz-transition: max-width .5s ease-in-out;
  -o-transition: max-width .5s ease-in-out;
  transition: max-width .5s ease-in-out;
}

JavaScript

setTimeout(function () {
   $('div:first-child').css('max-width', '500px');
}, 1000);