Tengo una frase donde me desvanezco en una palabra y la sustituyo por otra de una matriz. Sin embargo, dado que todas las palabras varían en longitud, el ancho de la oración cambia bruscamente y se traduce en una transición entrecortada.
¿Cómo puedo animar el cambio de ancho?? Intenté agregar una transición al contenedor de la oración en css pero eso no funcionó. Apliqué la transición como1.5s all linear, así que debería estar animando el ancho así como todo lo demás cada vez que haya un cambio. ¿Algunas ideas?

$(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>

EDITAR: Lo siento si no estaba claro, solo quiero desvanecer la palabra, no toda la oración. Estoy tratando de animar el ancho para adaptarse a la nueva palabra. No quiero cambiar / agregar ningún elemento, solo resuélvalo con las etiquetas actuales en su lugar.