CSS：如何顶部对齐旋转的文本？

如何解决CSS：如何顶部对齐旋转的文本？

请在设置“重复”标签之前阅读我的问题！

假设我们有几个文本 div's 并排在一起，它们都旋转了大约 90 度。到目前为止一切都很好，但不幸的是，它们都使用不同的基线来定位文本。

如何将所有这些文本元素对齐到一个假想的顶部基线？

目前它们在不同的位置看起来是底部对齐的，看起来很丑......

.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>