How to align rotated text and icons in CSS

Question

I am trying to teach myself CSS and I am struggling with alignment. What I want to achieve is to have a fixed sidebar that has some icons and a rotated text, all of them should be in a column.

My code:

HTML:

<div class="Sidebar">
    <div id="S1" class="SBlock">
        <a href="https://twitter.com"><img src="Twitter_Logo.png" width=10px height=10px></a>
    </div>
    <div id="S2" class="SBlock">
        <a href="https://linkedin.com"><img src="Linkedin_Logo.png" width=10px height=10px></a>
    </div>
    <div id="Follow" class="SBlock">
        Follow Us
    </div>
</div>

CSS:

.Sidebar {
    position: fixed;
    top: 50%;
    height: 300px;
}

#S1 {
    position: absolute;
    left: 20%;
    top: 10%;
}

#S2 {
    position: absolute;
    left: 20%;
    top: 20%;
}

#Follow {
    transform: rotate(-90deg);
    font-size: 12px;
    position: absolute;
    left: 20%;
    top: 50%;
    font-family: Montserrat;
    text-transform: uppercase;
    overflow: hidden;
    white-space: nowrap;
}

Which produces this:

Result:

It works fine for the icons, I assume that is because they are the same size, but the text is way further to the right. Any ideas?

Answer 1

   .Sidebar {
      position: fixed;
      top: 50%;
      display: flex;
      flex-direction: column;
      align-items: center;
    }
    
    .SBlock {
      margin: 10px 0;
    }
    
    #Follow {
      transform: rotate(-90deg);
      font-size: 12px;
      font-family: Montserrat;
      text-transform: uppercase;
      white-space: nowrap;
      writing-mode: vertical-rl;
      text-orientation: mixed;
    }

Try this...