Aligning upright text next to horizontal text with dynamic font resizing

Question

I want to create a CSS component wherein I can align upright vertical text next to horizontal text as shown in both the images. I want to make sure that the text is resizable (dynamic container height). Your help is deeply appreciated, thank you.

Original Text/Large Screen Text Resized Text/Mobile Screen Text

Current code

Markup

<div class="bro-text">
    <h4 style="width: {h}px">Vertical</h4>
    <h1 bind:clientHeight={h}>
        Dummy <br/>
        Text
    </h1>
</div>

Styling

.bro-text {
    display: flex;
    align-items: flex-end;
}
.bro-text h4, .bro-text h1 {
    display: inline-block;
}

.bro-text h4 {
    transform: rotate(-90deg);
    -webkit-transform: rotate(-90deg);
    -moz-transform: rotate(-90deg);
    -ms-transform: rotate(-90deg);
}

Result

Result of the above code https://i.sstatic.net/Ma1My.png

Answer 1

With pure CSS, it is not quite possible to style your container based on container's height. An alternative is to play around with a combination of vw and px with calc for the font-size. The height of the container is indirectly due to the word break when view port width in shortened. You may have to find a value that suit your needs.

.bro-text {
    display: flex;
    width: 30%;
}

.vertical {
  writing-mode: vertical-rl;
  transform:scale(-1);
  width: auto;
  text-align: center;
  font-size: calc( 24px - 1vw );
}

<div class="bro-text">
   
    <h4 class="vertical">Vertical</h4>
    
    <h1>
        Dummy  Dummy  Text
    </h1>
</div>