<div class="poem">
  <h1>早发白帝城</h1>
  <div class="author">
    <span>李白</span>
    <span class="year">701</span>
    <span class="to">~</span>
    <span class="year">762</span>
  </div>
  <p>朝辞白帝彩云间</p>
  <p>千里江陵一日还</p>
  <p>两岸猿声啼不住</p>
  <p>轻舟已过万重山</p>
</div>
body {
  display: flex;
  justify-content: flex-end;
  padding: 20px;
}
.poem {
  align-self: end;
  color: #333;
  font-size: 1.4rem;
  /* 
    文字书写方向
    默认 horizontal-tb 表示从上到下
    vertical-rl 表示从右向左
  */
  writing-mode: vertical-rl;
}
.author {
  color: #aaa;
  font-size: 0.8rem;
  margin-right: -30px;
  text-align: end;
}
.author .year {
  /* 设置文本朝向 */
  text-orientation: upright;
  /* 文字正常朝向时是否连着组合起来 */
  text-combine-upright: all;
  margin: 5px 0;
}

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.