How to align rotated text and icons in CSS - html

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">
<img src="Twitter_Logo.png" width=10px height=10px>
</div>
<div id="S2" class="SBlock">
<img src="Linkedin_Logo.png" width=10px height=10px>
</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...

Answer 2

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.
.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;
}
<div class="Sidebar">
<div id="S1" class="SBlock">
<img src="Twitter_Logo.png" width=10px height=10px>
</div>
<div id="S2" class="SBlock">
<img src="Linkedin_Logo.png" width=10px height=10px>
</div>
<div id="Follow" class="SBlock">
Follow Us
</div>
</div>

Answer 3

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/