<div>
  <button id="button">open item</button>
  <div class="open-content">
    <p class="text">This is open content with @starting-style.</p>
  </div>
</div>

.text {
  width: 350px;
}

.open-content {
  display: none;
  border: solid 1px #333;
  width: 350px;
  overflow: hidden;

  @starting-style {
    width: 0px;
  }
}

.open {
  display: block;
  transition: width 4s;
}

const button = document.querySelector("#button");

button.addEventListener("click", () => {
  const openContent = document.querySelector(".open-content");
  openContent.classList.add("open");
});