<h3 id="controls-title">
  Controls
</h3>
<div id="controls-body">
  <p id="c-1">
    Rotate: Click and drag
  </p>
  <p id="c-2">
    Pan: Hold shift, click and drag
  </p>
  <p id="c-3">
    Zoom: Hold ctrl, click and drag
  </p>
</div>
#controls-title {
  width: 75px;
  margin: 15px auto;
}
#controls-body {
  width: 100%;
  position: relative;
  margin: 0px;
}

#c-1 {
  /* Rotate */
  position: absolute;
  left: 0px;
  top: 0px;
  margin: 0px;
}
#c-2 {
  /* Pan */
  position: relative;
  width: 225px;
  text-align: center;
  margin: 0px auto;
  right: 10px;
}
#c-3 {
  /* Zoom */
  position: absolute;
  right: 10px;
  top: 0px;
  margin: 0px;
}

body {
  margin: 1rem 2rem;
  background-color: #333;
  color: #ddd;
  font-family: "Lato", sans-serif;
  font-size: 0.8rem;
}

External CSS

  1. https://fonts.googleapis.com/css?family=Lato

External JavaScript

This Pen doesn't use any external JavaScript resources.