JSFiddle - React, Tailwind, and code Playground

HTML

<div id="block">
    1
    -
    12
</div>

CSS

#block {
    text-align: justify;
    text-align-last: justify;
    background: #000;
    color: white;
    width:150px;
    height: 1.1em;
    line-height: 1.1;
}
#block:after {
    content: ".";
    display: inline-block;
    width: 100%;
    height: 0;
    visibility: hidden
}
#start {
    float:left;
}
#end {
    float:right;
}