旋转文本后如何自动调整容器/父项的宽度？

Question

当我将div /容器内的文本元素旋转90度时，尽管文本已旋转，但父容器的宽度与文本的长度相同。

例如： 假设文本是200 x10。旋转后，它变成10 x200。但是容器保持200 x 10而不是10 x 200。

如何自动旋转容器的宽度，使其成为旋转文本时未旋转的文本的高度？

<div class="container">
  <span class="to_rotate"> Hello, rotate me! </span>
</div>

.to_rotate {
   transform: rotate(-90deg);
}