<div class="container">
  <div class="wrap">
    <div class="text">Hello!</div>
  </div>
  <button class="button">Press me</button>
</div>

body {
  display: flex;
  justify-content: center;
  flex-direction: column;
  align-items: center;
  background: #16171c;
}

.container {
  display: flex;
  justify-content: center;
  flex-direction: column;
  align-items: center;
  gap: 20px;
}

.wrap {
  width: 50px;
  background: #fff;
  height: 50px;
  padding: 0 15px;
  transition: 0.5s;
  border-radius: 5px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.wrap-active {
  width: 200px;
}

.text {
  color: #333;
  font-family: sans-serif;
  font-size: 18px;
  display: none;
  opacity: 0;
}

.text-active {
  display: block;
  animation: fadeIn 1s 2s both;
}

.button {
  padding: 8px 15px;
  background: #673ab7;
  border-radius: 5px;
  color: #FFF;
}

@keyframes fadeIn {
    from { opacity: 0; }
      to { opacity: 1; }
}

const wrap = document.querySelector(".wrap");
const text = document.querySelector(".text");
const button = document.querySelector(".button");

button.addEventListener("click", () => {
  if (wrap.classList.contains("wrap-active")) {
    wrap.classList.remove("wrap-active");
    text.classList.remove("text-active");
  } else {
    wrap.classList.add("wrap-active");
    text.classList.add("text-active");
  }
});