JSFiddle - React, Tailwind, and code Playground

HTML

<div class="test0">
  <p>2016/08/08</p>
  <p>----/--/--</p>
</div>

<div class="test5">
  <p>2016/08/08</p>
  <p>----/--/--</p>
</div>

<div class="test1">
  <p>2016/08/08</p>
  <p>----/--/--</p>
</div>

<div class="test2">
  <p><span>2</span><span>0</span><span>1</span><span>6</span><span>/</span><span>0</span><span>8</span><span>/</span><span>0</span><span>8</span></p>
  <p><span>-</span><span>-</span><span>-</span><span>-</span><span>/</span><span>-</span><span>-</span><span>/</span><span>-</span><span>-</span></p>
</div>

<div class="test3">
  <p>2016/08/08</p>
  <p>----/--/--</p>
</div>

<div class="test4">
  <p>2016/08/08</p>
  <p>----/--/--</p>
</div>

SCSS

div {
  position: relative;
  &::after {
    position: absolute;
    top: 0;
    left: 120px;
    background-color: gold;
  }
  
  background-color: #eee;
}

.test0 {
  font-family: monospace;
  &::after {
    content: "monospace";
  }
}

.test1 {
  font-family: "Osaka-Mono";
  &::after {
    content: "Osaka-Mono";
  }
}

.test2 {
  span {
    display: inline-block;
    width: 0.65em;
    text-align: center;
  }
  &::after {
    content: "span & fixed-width";
  }
}

.test3 {
  font-family: "Courier New";
  &::after {
    content: "Courier New";
  }
}

.test4 {
  font-family: "MS Gothic";
  &::after {
    content: "MS Gothic";
  }
}

.test5 {
  font-family: monospace;
  -webkit-font-feature-settings: "tnum" on, "lnum" on;
  font-feature-settings: "tnum" on, "lnum" on;
  &::after {
    content: "monospace & font feature : tnum, lnum";
  }
}