I am working on creating an online portfolio using HTML and CSS, but I am facing a challenge with vertical alignment.
My goal is to have a line of vertical text running down the left side of the screen that displays "My occupation". On the right side of the screen, there will be images and text indicating "My name", all formatted in a standard way.
I managed to create the vertical text, however, any content I try to add after it automatically aligns itself to the bottom of the vertical text. I even attempted using span elements to adjust the alignment, but unfortunately, it did not work. How can I get the subsequent content to align to the top of the container?
Below is 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>