<style>
div {
  width: 6em;
  font-family: Ahem;
  color: green;
  height: 1em;
  overflow: hidden;
  background-color: red;
}
span {
  background-color: green;
}
</style>
<div>X<span> </span>XX-<span style="padding-left: 1em;"></span>XX</div>
<div>X<span> </span>XX-<span style="padding-left: 1em;"><span></span></span>XX</div>
<div><span>X XX-</span><span style="padding-left: 1em;"><span></span></span>XX</div>
<div><span>X XX-</span><span></span><span style="padding-left: 1em;"><span></span></span>XX</div>
<div><span>X XX-</span><span></span><span style="padding-left: 1em;"><span></span></span><span>XX</span></div>
<div><span><span>X XX-</span><span></span><span style="padding-left: 1em;"><span></span></span></span><span>XX</span></div>
<div><span><span>X XX-</span><span></span><span style="padding-left: 1em;"><span></span></span></span><span></span><span>XX</span></div>
<div><span><span><span>X XX-</span><span></span><span style="padding-left: 1em;"><span></span></span></span><span></span><span>XX</span></span></div>