Align DIV Tags Horizontally

Question

I have some div tags which I am using as contact links on my website. They are meant to be located on the right hand side and be aligned in one line.

Currently looks like:

Preferred alignment:

Code below:

#book-me {
      position: fixed;
      right: 0;
      transform: translateY(-50%);
      z-index: 99999;
      top: 50%;
      background: black;
      color:white;
      padding: 5px 10px;
    }
    #book-me a {
      background: black;
      color: white;
      display: inline-block;
      font-size: 14px;
      font-weight: bold;
      text-transform: uppercase;
      font-family: sofia-pro;
      writing-mode: vertical-rl;
    }
    @media screen and (max-width: 960px) {
      #book-me {
        bottom: 0;
        top: initial;
        transform: none;
      }
      #book-me a {
        writing-mode: initial;
        padding: 5px 10px;
      }
    }

<div id="book-me">
  <a href="tel:############">Call</a>,
  <a href="sms:############">Text</a> or
  <a href="############">WhatsApp</a>
</div>

Answer 1

Why not just rotate your book-me div (use full screen on snippet below to see transform):

#book-me {
  position: fixed;
  right: 0;
  transform: rotate(90deg);
  transform-origin: top right;
  z-index: 99999;
  bottom: 0;
  background: black;
  color: white;
  padding: 5px 10px;
}

#book-me a {
  background: black;
  color: white;
  display: inline-block;
  font-size: 14px;
  font-weight: bold;
  text-transform: uppercase;
  font-family: sofia-pro;
}

@media screen and (max-width: 960px) {
  #book-me {
    transform: none;
  }
  #book-me a {
    padding: 5px 10px;
  }
}

<div id="book-me">
  <a href="tel:############">Call</a>,
  <a href="sms:############">Text</a> or
  <a href="############">WhatsApp</a>
</div>