JSFiddle - React, Tailwind, and code Playground

HTML

<body>


  <div class="container">
    This is some text.
  </div>

  <button>Change Text</button>


</body>

CSS

body {
  padding: 50px;
  /* font */
  font-family: Arial;
  font-size: 12px;
}

.container {
  overflow: hidden;
  white-space: nowrap; // don't wrap text (try removing and see what happens)
  display: inline-block;
  background: #ddd;
  padding: 7px 10px;
  margin-bottom: 30px;
  transition: width 200ms ease;
}

button {
  display: block;
}

JavaScript

function getTextWidth(text, css) {
  var e = $('<span></span>'); // dummy element
  e.css(css); // set properties
  e.text(text); // set test
  var width = e.appendTo($('body')).width(); // append and get width
  e.remove(); // remove from DOM
  return width;
}

// ---------------------------

var count = 0;
var texts = ['Lorem ipsum', 'dolor sit amet, at nihil nonumy vim', 'eum ad', 'nec maiestatis', 'At deleniti pertinax salutandi mei, liber nostro euripidis'];

var $container = $('.container'); // cache DOM

$container.text(texts[count]);
$container.width(getTextWidth(texts[count], {
  'font-family': 'Arial',
  'font-size': '12px'
}));
count++;

$('button').on('click', function() {
  if (++count >= texts.length) count = 0;
  $container.width(getTextWidth(texts[count], {
    'font-family': 'Arial',
    'font-size': '12px'
  }));
  $container.text(texts[count]);

});