<div class="wrapper">
  <div class="section">
    <ul class="social">
      <li>
        <a class="fa fa-facebook" href="#"></a>
      </li>
      <li>
        <a class="fa fa-twitter" href="#"></a>
      </li>
      <li>
        <a class="fa fa-linkedin" href="#"></a>
      </li>
      <li>
        <a class="fa fa-google" href="#"></a>
      </li>
    </ul>
    <div class="content">
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Autem cum quam corrupti eveniet, enim iure, repellat. Facere repellendus placeat vitae cumque temporibus nostrum harum eius voluptas. Voluptatum iusto harum ullam.</p>

      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Autem cum quam corrupti eveniet, enim iure, repellat. Facere repellendus placeat vitae cumque temporibus nostrum harum eius voluptas. Voluptatum iusto harum ullamctetur adipisicing elit.
        Autem cum quam corrupti eveniet, enim iure, repellat. Facere repellendus placeat vitae cumque temporibus nostrum harum eius voluptas. Voluptatum iusto harum ullam..</p>

      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Autem cum quam corrupti eveniet, enim iure, repellat. Facere repellendus placeat vitae cumque temporibus nostrum harum eius voluptas. Voluptatum iusto harum ullam.</p>

      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Autem cum quam corrupti eveniet, enim iure, repellat. Facere repellendus placeat vitae cumque temporibus nostrum harum eius voluptas. Voluptatum iusto harum ullam.ctetur adipisicing elit.
        Autem cum quam corrupti eveniet, enim iure, repellat. Facere repellendus placeat vitae cumque temporibus nostrum harum eius voluptas. Voluptatum iusto harum ullam.</p>
    </div>
  </div>
  
  <p class="footer">Demo for my <a href="https://ishadeed.com/article/css-writing-mode/"> article on CSS Writing Mode</a></p>
</div>
.wrapper {
  max-width: 700px;
  margin-left: auto;
  margin-right: auto;
  padding-top: 30px;
}

.section {
  display: flex;
}

.social {
  writing-mode: vertical-lr;
  padding: 10px;
  
  li {
    display: inline;
    margin-bottom: 10px;
  }
  
  a {
    text-decoration: none;
    font-size: 24px;
    color: #000;
  }
}

.wrapper {
  flex: 1;
}

p {
  margin: 0 0 20px 0;
}

.content {
  background: #e1e1e1;
  padding: 1.35em;
}

.footer {
  text-align: center;
  margin-top: 20px;
}
View Compiled
Run Pen

External CSS

  1. https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.6.3/css/font-awesome.min.css

External JavaScript

This Pen doesn't use any external JavaScript resources.