I have a div with fixed height and dynamic width:

div {
  height: 5rem;
  min-width: 10rem;
  width: fit-content;
}

When I add some text into this element, I would like this text to fill the height (5rem) of the div first. Only when height is fully filled with a content, width should be increased (because of fit-content).

<div>
This text should first fill the height of the div and only then expand the div to right
</div>

Currently, however, div is always expanding its width and there is only 1 line of the content (height of the div is not filled):

Is there any way how to do that? Here is an example.