css - 複数の回転要素を垂直方向に積み重ねる

Question

要素間の間隔を静的に固定する (私の場合は下からピクセル幅を使用する) ことに頼らずに、回転を使用するときに複数の要素を垂直にスタックするにはどうすればよいですか?

これが私の現在の HTML と CSS/SASS です:

HTML:

<div class="results-indicator-container">
    <div class="results-indicator-label-won">5x</div>
    <div class="results-indicator-label-lost">5x</div>
    <div class="results-indicator-label-tied">5x</div>
</div>

CSS/SASS:

.results-indicator-container {
  bottom: 51px;
  height: 59px;
  left: 167px;
  position: relative;
  width: 16px;
  font-size: 12px;
  float: left;

  .results-indicator-label {
    -webkit-transform: rotate(-90deg);
    -moz-transform: rotate(-90deg);
    filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=3);
    position: absolute;
    bottom: 0px;
  }

  .results-indicator-label-won {
    @extend .results-indicator-label;
  }

  .results-indicator-label-lost {
    @extend .results-indicator-label;
    bottom: 25px;
  }

  .results-indicator-label-tied {
    @extend .results-indicator-label;
    bottom: 50px;
  }
}

これは、垂直に積み重ねられた要素が現在どのように見えるかのスクリーンショットです。