flex-text/demo/style.css

Mastering font-size like flexbox!

.dollar {
  color: #da2b50;
  width: 100px;
  border: 1px solid #abc;
  letter-spacing: -0.31em;
  white-space: nowrap;
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: start;
  -webkit-align-items: flex-start;
      -ms-flex-align: start;
          align-items: flex-start;
  font-family: Helvetica, Arial, "Hiragino Sans GB", "Microsoft YaHei", "WenQuan Yi Micro Hei", sans-serif;
}
.dollar > span {
  display: inline-block;
  vertical-align: top;
  outline: 1px solid;
  letter-spacing: normal;
}

.integer {
  font-size: 2em;
}

[data-desc] {
  display: inline-block;
  width: 10em;
}
[data-desc]::before {
  content: attr(data-desc) ":";
  width: 10em;
}

#ctrl {
  margin-bottom: 1em;
}