How do I automate the width of a container / parent after rotating a text?

Question

When I rotate a text element inside a div / container by 90 degrees, the parent container has the same width as the length of the text despite the text being rotated.

So for example: Suppose that the text is a 200 x 10. After rotation, it becomes a 10 x 200. But the container stays 200 x 10 as opposed to 10 x 200.

How can I automate the width of the container so that it is the height of the unrotated text when the text is rotated?

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

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