Анимировать изменение ширины слова

У меня есть предложение, в котором я исчезаю одним словом и заменяю его другим из массива. Однако, поскольку все слова различаются по длине, ширина предложения резко изменяется, и это приводит к прерывистому переходу.
Как я могу оживить изменение ширины? Я попытался добавить переход к контейнеру предложения в CSS, но это не сработало. Я применил переход как1.5s all linear, поэтому он должен анимировать ширину, а также все остальное, когда есть изменения. Есть идеи?

$(function() {
  var hello = ['dynamic', 'a', 'aklsjdlfajklsdlkf', 'asdf'];
  var used = ['dynamic'];
  var greeting = $('#what');
  var item;

  function hey() {

    item = hello[Math.floor(Math.random() * hello.length)];
    if (hello.length != used.length) {
      while (jQuery.inArray(item, used) != -1) {
        item = hello[Math.floor(Math.random() * hello.length)];
      }
      used.push(item);
    } else {
      used.length = 0;
      item = hello[Math.floor(Math.random() * hello.length)];
      used.push(item);
    }
    greeting.html(item);
    greeting.animate({
      "opacity": "1"
    }, 1500);
  }

  window.setInterval(function() {
    greeting.animate({
      "opacity": "0"
    }, 1500);
    setTimeout(hey, 1500)
  }, 5000);

});
#sentence {
  transition: 1.5s all linear;
}

#what {
  font-style: italic;
  text-decoration: underline;
  color: red;
}
<p id="sentence">
  This is a sentence that has <span id="what">dynamic</span> text that alters width.
</p>

<script src="//ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>

РЕДАКТИРОВАТЬ: Извините, если мне было неясно, я только хочу исчезнуть слово, а не все предложение. Я пытаюсь оживить ширину, чтобы соответствовать новому слову. Я не хочу изменять / добавлять какие-либо элементы, просто решить с текущими тегами на месте.

Ответы на вопрос(4)

Ваш ответ на вопрос