<div>
  <p class="text">this is transition content!</p>
</div>

<button id="button">let's transition</button>

:root {
  interpolate-size: allow-keywords;
}

.text {
  border: solid 1px #ccc;
  padding: 8px;
  width: min-content;

}

.transition {
  transition: width 2s ease;
  width: 200px;
}

const button = document.querySelector("#button");
console.log(button)
button.addEventListener("click", () => {
  const text = document.querySelector(".text");
  text.classList.add("transition");
})