How to place rotated text properly? - html

Question

I have a flex wrapper with 3 columns, in third column there is rotated text, how can I place the text to the bottom right position of the column?
What I want:
What I have:
.wrapper {
border: 1px solid black;
padding-top: 50px;
display: flex;
justify-content: space-between;
}
.column-2 {
transform-origin: left bottom;
transform: rotate(-90deg);
}
<div class="wrapper">
<div class="column-1">Column 1</div>
<div class="column-2">Column 2</div>
</div>

Answer 1

writing-mode can also be used to rotate text :
The writing-mode CSS property sets whether lines of text are laid out horizontally or vertically, as well as the direction in which blocks progress. When set for an entire document, it should be set on the root element (html element for HTML documents).
possible examples:
.wrapper {
border: 1px solid black;
display: flex;
justify-content: space-between;
align-items: center;
}
.column-2 {
writing-mode: vertical-lr;
border: solid;
margin: 2em;
}
/* also */
.wrapper.bis {
align-items: end;
}
.bis .column-2 {
margin: 0;
}
<div class="wrapper">
<div class="column-1">Column 1</div>
<div class="column-2">Column 2</div>
</div>
<hr>
<div class="wrapper bis">
<div class="column-1">Column 1</div>
<div class="column-2">Column 2</div>
</div>
An older similar answer : How do I center a transformed and rotated div? (when prefix was to be used ) applied here without prefix would do :
.wrapper {
border: 1px solid black;
display: flex;
justify-content: space-between;
align-items: center;
}
.column-2 {
writing-mode: vertical-lr;
transform:scale(-1);
border: solid;
margin: 2em;
}
/* also */
.wrapper.bis {
align-items: end;
}
.bis .column-2 {
margin: 0;
}
<div class="wrapper">
<div class="column-1">Column 1</div>
<div class="column-2">Column 2</div>
</div>
<hr>
<div class="wrapper bis">
<div class="column-1">Column 1</div>
<div class="column-2">Column 2</div>
</div>
If you want to stick to transform, here is an older answer of mine that allows to stretch the container according to the string length : How to display vertical text in table headers with auto height / without text overflow?
text-orientation can be usefull too :
The text-orientation CSS property sets the orientation of the text characters in a line. It only affects text in vertical mode (when writing-mode is not horizontal-tb). It is useful for controlling the display of languages that use vertical script, and also for making vertical table headers.

Answer 2

You can do a display: flex on the columns div, and adjust them as you need. I've made an example on codepen
<div class="parent">
<div class="child first">Column 1</div>
<div class="child second">Column 2</div>
<div class="child third"><p>Column 3</p></div>
</div>
And then the CSS:
.parent {
display: flex;
}
.child {
width: 20%;
display: flex;
height: 100px;
border: 2px solid black;
}
.first {
font-size: 40px;
}
.second {
align-items: flex-end;
justify-content: center;
}
.third p {
transform: rotate(-90deg);
}

Answer 3

You can do something like this
.inner {
position: absolute;
top: 50%;
left: 50%;
}
.rotate {
transform: translateX(-50%) translateY(-50%) rotate(-90deg);
}

Answer 4

Take a look at transform-origin
.wrapper {
font-family: Arial;
display: flex;
flex-direction: row;
}
.wrapper div {
padding: 0 20px;
}
.wrapper h3 {
font-size: 0.4em;
transform: rotate(-90deg);
transform-origin: 35px 16px;
}
<div class="wrapper">
<div>
<h1>Column 1</h1>
</div>
<div>
<h2>Column 2</h2>
</div>
<div>
<h3>Column 3</h3>
</div>
</div>