How can account for variable timing of adding words in this Javascript+CSS message animation?

I’m writing an animation for a streaming text response in a messaging service. Each word drops in to the bubble, which resizes dynamically.

It looks good with the right timing values, but try setting the delay variable in addMessage() to different numbers like 25 or 150, and the bubble will jerk and wobble. I need it to handle variable timing of adding words more gracefully.

I think I needed to do something different with a sibling element to the chat-text element that would serve as the blue background, but I couldn’t quite figure it out. Any suggestions are appreciated.

Codepen: https://codepen.io/goldenjoe/pen/yLdVXjY

const chatContainer = document.getElementById('chat-container');
const chatText = document.getElementById('chat-text');

// const messages = ["Hello", "How are you?", "I'm a chatbot.", "I can help you with various tasks."];
const messages = ["Hello, how are you? I'm a chatbot. I can help you with various tasks."];
let index = 0;

function addWord(word) {
  const wordSpan = document.createElement('span');
  wordSpan.classList.add('word');
  wordSpan.textContent = word.trim();
  chatText.appendChild(wordSpan);

  const spaceSpan = document.createElement('span');
  spaceSpan.textContent = ' ';
  chatText.appendChild(spaceSpan);

  resizeContainer();
}

function resizeContainer() {
  const chatBoxRect = chatText.getBoundingClientRect();
  const containerAutoRect = chatContainer.getBoundingClientRect();

  // This is a bit weird, we want the width of the container, but the height of the text.
  chatContainer.style.width = containerAutoRect.width + 0 + 'px';
  chatContainer.style.height = chatBoxRect.height + 0 + 'px';
}

function addMessage() {
  if (index < messages.length) {
    const words = messages[index].split(" ");
    let delay = 50;
    words.forEach((word, i) => {
      setTimeout(() => {
        addWord(word + ' ');
      }, i * delay);
    });
    index++;
  }
}

setInterval(addMessage, 500);

// Initial resize to fit the first message
resizeContainer();

body {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
  background-color: #f0f0f0;
  margin: 0;
}

#chat-container {
  background-color: #000ff0ff;
  color: white;
  padding: 10px 20px;
  border-radius: 10px;
  font-family: Arial, sans-serif;
  font-size: 1.5em;
  transition: width 0.08s linear, height 0.08s linear;
  max-width: 300px;
}


/* Just an empty container for now...couldn't find a use for a style here. */

#chat-text {}

.word {
  display: inline-block;
  /* this allows the offset to work */
  opacity: 0;
  /* if it doesn't start this way the animation won't fade in */
  transform: scale(1.2) translateY(-16px);
  animation: textIn 0.3s forwards;
  animation-delay: 0.25s;
  /* 
         HACK: There's a timing issue...if the container doesn't finish changing its size to be wide enough for the text, the text will "jump" between lines.
         The delay gives the container time to expand, preventing the text from "snapping" to the correct line.
         The correct solution is probably to have a sibling span that is just the background, and animate it matching the text size.
         */
}

@keyframes textIn {
  from {
    opacity: 0;
    transform: scale(1.2) translateY(-16px);
  }
  to {
    opacity: 1;
    transform: scale(1) translateY(0);
  }
}

<div id="chat-container">
  <span id="chat-text"></span>
</div>