<div>
  <h2 class="sb:spacing-heading">Pixel value calculator</h2>
  <div class="sb:spacing-pixel-section">
    <div class="pl-input-block pl-input-block-outline">
      <label class="pl-input-label" for="sb:spacing-unit-input">
        Spacing unit
      </label>
      <input id="sb:spacing-unit-input" class="pl-input-control" required="" />
      <div class="pl-input-text-wrapper"></div>
    </div>
    <div class="pl-input-block pl-input-block-outline">
      <label class="pl-input-label" for="sb:spacing-width-input">
        Viewport width
      </label>
      <input id="sb:spacing-width-input" class="pl-input-control" required="" />
      <div class="pl-input-text-wrapper"></div>
    </div>
    <button
      type="button"
      class="pl-button pl-button-primary"
      id="sb:spacing-calc-button"
    >
      <span>Calculate</span>
    </button>
    <p id="sb:spacing-calc-result" class="invisible"></p>
  </div>
  <h2 class="sb:spacing-heading">Spacing scale</h2>
  <div class="sb:spacing-block-section">
    <div class="sb:spacing">
      <div class="sb:spacing-block sb:spacing--4"></div>
      <span>4</span>
    </div>
    <div class="sb:spacing">
      <div class="sb:spacing-block sb:spacing--8"></div>
      <span>8</span>
    </div>
    <div class="sb:spacing">
      <div class="sb:spacing-block sb:spacing--12"></div>
      <span>12</span>
    </div>
    <div class="sb:spacing">
      <div class="sb:spacing-block sb:spacing--16"></div>
      <span>16</span>
    </div>
    <div class="sb:spacing">
      <div class="sb:spacing-block sb:spacing--24"></div>
      <span>24</span>
    </div>
    <div class="sb:spacing">
      <div class="sb:spacing-block sb:spacing--32"></div>
      <span>32</span>
    </div>
    <div class="sb:spacing">
      <div class="sb:spacing-block sb:spacing--48"></div>
      <span>48</span>
    </div>
    <div class="sb:spacing">
      <div class="sb:spacing-block sb:spacing--64"></div>
      <span>64</span>
    </div>
    <div class="sb:spacing">
      <div class="sb:spacing-block sb:spacing--96"></div>
      <span>96</span>
    </div>
    <div class="sb:spacing">
      <div class="sb:spacing-block sb:spacing--160"></div>
      <span>160</span>
    </div>
  </div>
  <h2 class="sb:spacing-heading">Padding</h2>
  <div class="sb:spacing-block-section">
    <div class="sb:spacing-block sb:padding--4">
      <div class="sb:spacing-block--padding"></div>
    </div>
    <div class="sb:spacing-block sb:padding--8">
      <div class="sb:spacing-block--padding"></div>
    </div>
    <div class="sb:spacing-block sb:padding--12">
      <div class="sb:spacing-block--padding"></div>
    </div>
    <div class="sb:spacing-block sb:padding--16">
      <div class="sb:spacing-block--padding"></div>
    </div>
    <div class="sb:spacing-block sb:padding--24">
      <div class="sb:spacing-block--padding"></div>
    </div>
    <div class="sb:spacing-block sb:padding--32">
      <div class="sb:spacing-block--padding"></div>
    </div>
    <div class="sb:spacing-block sb:padding--48">
      <div class="sb:spacing-block--padding"></div>
    </div>
    <div class="sb:spacing-block sb:padding--64">
      <div class="sb:spacing-block--padding"></div>
    </div>
    <div class="sb:spacing-block sb:padding--96">
      <div class="sb:spacing-block--padding"></div>
    </div>
  </div>
  <h2 class="sb:spacing-heading">Margin</h2>
  <div class="sb:spacing-margin-section">
    <p class="sb:spacing-block--margin sb:margin--0">
      Lorem ipsum dolor sit amet, consectetur adipisicing elit.
    </p>
    <p class="sb:spacing-block--margin sb:margin--4">
      Lorem ipsum dolor sit amet, consectetur adipisicing elit.
    </p>
    <p class="sb:spacing-block--margin sb:margin--8">
      Lorem ipsum dolor sit amet, consectetur adipisicing elit.
    </p>
    <p class="sb:spacing-block--margin sb:margin--12">
      Lorem ipsum dolor sit amet, consectetur adipisicing elit.
    </p>
    <p class="sb:spacing-block--margin sb:margin--16">
      Lorem ipsum dolor sit amet, consectetur adipisicing elit.
    </p>
    <p class="sb:spacing-block--margin sb:margin--24">
      Lorem ipsum dolor sit amet, consectetur adipisicing elit.
    </p>
    <p class="sb:spacing-block--margin sb:margin--32">
      Lorem ipsum dolor sit amet, consectetur adipisicing elit.
    </p>
    <p class="sb:spacing-block--margin sb:margin--48">
      Lorem ipsum dolor sit amet, consectetur adipisicing elit.
    </p>
    <p class="sb:spacing-block--margin sb:margin--64">
      Lorem ipsum dolor sit amet, consectetur adipisicing elit.
    </p>
    <p class="sb:spacing-block--margin sb:margin--96">
      Lorem ipsum dolor sit amet, consectetur adipisicing elit.
    </p>
    <p class="sb:spacing-block--margin sb:margin--160">
      Lorem ipsum dolor sit amet, consectetur adipisicing elit.
    </p>
  </div>
</div>