One-line adaptive reference list

index.html

<div class="raz">
  <a href="#">Красота</a>
    <span>
      <a href="#">Волосы</a>
      <a href="#">Лицо</a>
      <a href="#">Макияж</a>
      <a href="#">Тело</a>
      <a href="#">Косметология</a>
      <a href="#">Диеты</a>
      <a href="#">Фитнес</a>
    </span>
</div>

one-line-adaptive-reference-list.markdown

One-line adaptive reference list

A Pen by Beibit Sakhanov on CodePen.

License.

style.css

.raz a {
  text-decoration: none;
  vertical-align: middle;
}
.raz > a {
  display: inline-block;
  padding: .5em 0;
  font-size: 2em;
}
.raz span {
  display: inline-block;
  padding: 0 1em 1em;
  word-spacing: 1em;
}