Does vertical text affect other text placement in HTML?

I’m trying to make an online portfolio using HTML and CSS, but I’m having trouble with some vertical alignment.

I want to have a line of vertical text that goes down the left side of the screen that says, "My occupation". On the right side of the screen will be pictures and text that reads "My name", all formatted normally.

I made the vertical text, but whenever I try to add content after that, it automatically aligns itself to the bottom of the vertical text. I’m even using span to try and align it but it doesn’t work. How do I get the following content to align to the top of the container?

Here’s my source code.

.myName {
    font-size: 400%;
    font-family: gadugi;
    padding-left: 5%;
    color: #455750;
}

.sideLine {
    color: #80928B;
    font-size: 220%;
    font-family: candara;
    writing-mode: vertical-rl;
    padding-top: 2%;
}

<div>
    <span class="sideLine">My occupation</span>
    <span class="myName">My name</span>
</div>