Top aligning vertical text in CSS/HTML?

I’m beginning to design my website and learning HTML and CSS and this has stumped me a little bit. Not sure if what I’m trying is correct.

I’m making a side banner, kind of like a physical media obi strip, on my webpage – where some of the text is in Japanese – and therefore the text is aligned vertically.

p {
  writing-mode: vertical-lr;
  text-orientation: upright;
  color: #fe87b3;
  font-family: "Helvetica";
  font-size: 18px;
}

<div align="center"><p>どんな時だってずっと二人で。どんな時だって側にいるから。<br> 過去はどこかにしまっておけ。ここからそう遠くないだろう。観たこともない景色。<br> 今夜のことは誰にも言わない。誰にも言わない。</p></div>

Easy enough! But when I do this, and align the font to the centre of the page, the text is also centered within its rows (bad phrasing, I’m aware!). I’d like all the text to be aligned from the top of the where it is supposed to begin, rather than this:

I’m sure there’s something I’m missing, but I’m not super bright at this (obviously) and I just thought that this might hopefully help someone else in the future too.

I tried;

• vertical-align: super/top/text-top;
• position: top/relative;

There may have been others but I have forgotten unfortunately. None of the above appear to do anything in my case.