0

Please read my question before setting "duplicate"-tag!

How can one align all those text elements at a imaginary top baseline (like "aligned right", if the text wouldn't be rotated)?

Currently they appear bottom-aligned in different positions, what looks very ugly...

.parent { position: relative;
          display: flex;}

.child {  position: absolute; }
 
.child1 {  left:25%;}
.child2 {  left:50%;}
.child3 {  left:75%;}

.child1 p {  transform:rotate(-90deg);}
.child2 p {  transform:rotate(-90deg);}
.child3 p {  transform:rotate(-90deg);}
<div class="parent">
   <div class="child child1"><p>TestTestTestTest<br>1</p></div>
   <div class="child child2"><p>Test<br>2</p></div>
   <div class="child child3"><p>TestTest<br>3</p></div>
</div>
Dave
  • 191
  • 6

0 Answers0