我旋转的标题-90度的宽度应该是旋转后的宽度

如何解决我旋转的标题-90度的宽度应该是旋转后的宽度

我有这个代码，想法是段落占用 50vw，标题为 10vw 的 div 和图像 40vw。 标题必须旋转 -90 度。并且末端应始终与图像的顶部对齐。标题是动态填充的，可以由用户更改，因此无论标题是什么，都应始终与顶部对齐。

我最接近的是这个，但问题是“旋转标题”div 的宽度要宽得多，因为它在尚未旋转时采用标题的宽度。 知道我怎么做才能使 div 永远不会超过 10vw 的宽度吗？

h1 {
  width: auto;
}

.rotated-title {
  transform: rotate(-90deg);
  transform-origin: top right;
  align-self: end
}

<div class="flexBox">
  <p>Lorem Ipsum....</p>
  <div class="rotated-title">
    <h1>Introduction</h1>
  </div>
  <img src="img/test.png">
</div>

解决方法

看看这个：

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

.flexbox {
  display: flex;
}

p {
  width: 50vw;
}

img {
  width: 40vw;
  height: 100vh;
  object-fit: cover;
}

.rotated-title {
  width: 10vw;
  transform: rotate(-90deg);
  transform-origin: bottom right;
  height: 100%;
}

<div class="flexbox">
  <p>Lorem Ipsum....</p>
  <div class="rotated-title">
    <h1>Introduction</h1>
  </div>
  <img src="https://source.unsplash.com/collection/402398/">
</div>

代码笔：https://codepen.io/manaskhandelwal1/pen/bGwxZKZ