JSFiddle - React, Tailwind, and code Playground

HTML

<div class="container">
  <p class="box">This is some text which changes size and causes the container to change height.</p>
</div>

<button onclick="changeSize()">Change text size</button>

CSS

.container {
  border: 1px solid red;
  width: 30%;
}

.box {
  background: lime;
  transition: font-size 1s linear;
  margin: 10px;
}

.box.active {
  font-size: 5px;
}

JavaScript

function changeSize() {
	var box = document.querySelector('.box');
	var height = box.offsetHeight;
  box.style.height = height + "px";
  document.querySelector('.box').classList.add('active');
}