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
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.stack.imgur.com/Ma1My.png
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>