How to align rotated text and icons in CSS

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?

   .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...

Try to use writing-mode: sideways-lr instead of transform: rotate(-90deg) to avoid the extra space. And you don't need position: absolute to get all items align in the sidebar.

Read more about writing-mode.

<!-- begin snippet: js hide: false console: true babel: false -->

<!-- language: lang-css -->

.Sidebar {
  position: fixed;
  height: 300px;
  display: flex;
  flex-direction: column;
  background: red;
  align-items: center;
  width: 50px;
}

#Follow {
  font-size: 12px;
  font-family: Montserrat;
  color: blue;
  writing-mode: sideways-lr;
}

<!-- language: lang-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>

<!-- end snippet -->

I'd suggest you use Flexbox which is so nice for designing layouts also, alignment is so easy using it.
This article is a good point to start:
https://css-tricks.com/snippets/css/a-guide-to-flexbox/