There is a block with social buttons. How to expand the text 180 degrees relative to the icons as shown in the picture? I still can not tie everything in 1 block so that it is always on the left relative to the text

enter image description here

ul { list-style: none; } .rotatable { display: inline-block; -webkit-transform: rotate(-90deg); -moz-transform: rotate(-90deg); -o-transform: rotate(-90deg); -ms-transform: rotate(-90deg); transform: rotate(-90deg); } 
 <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.0.10/css/all.css" integrity="sha384-+d0P83n9kaQMCwj8F4RJB66tzIwOKmrdb46+porD/OvrJ+37WqIM7UoBtwHO6Nlg" crossorigin="anonymous"> <ul> <li class='rotatable'> &mdash;&mdash;&mdash; Follow us </li> <li><i class="fab fa-facebook-f"></i></li> <li><i class="fab fa-twitter"></i></li> <li><i class="fab fa-instagram"></i></li> <li><i class="fab fa-pinterest"></i></li> </ul>

    1 answer 1

    Watch full screen

     * { margin: 0; padding: 0; } li, i { color: white; } ul { position: fixed; top: 0; left: 0; background-color: #212121; list-style: none; display: flex; flex-direction: column; justify-content: flex-end; align-items: center; height: 100%; } .rotatable { transform: rotate(-90deg); padding: 2rem 0; } li { padding: 1rem 0; } 
     <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.0.10/css/all.css" integrity="sha384-+d0P83n9kaQMCwj8F4RJB66tzIwOKmrdb46+porD/OvrJ+37WqIM7UoBtwHO6Nlg" crossorigin="anonymous"> <ul> <li class='rotatable'> ——Follow us </li> <li><i class="fab fa-facebook-f"></i></li> <li><i class="fab fa-twitter"></i></li> <li><i class="fab fa-instagram"></i></li> <li><i class="fab fa-pinterest"></i></li> </ul>