Inconsisent gap between number and text - html

Question

I got strange spacing issues. There is number and each text parallel. And there is different spacing between 1, 4, 7 and 'each' text. How can we fix this issue or it can't be fixed. I have not used any spacing and extra css properties.
#import url('https://fonts.googleapis.com/css?family=Spectral');
#import url('https://fonts.googleapis.com/css?family=Open+Sans|Spectral');
.bigger {
font-size: 40px;
}
p {
font-family: 'Open Sans', sans-serif;
}
<p>
<span class="bigger">81</span>
<small>each</small>
</p> <br>
<p>
<span class="bigger">84</span>
<small>each</small>
</p> <br>
<p>
<span class="bigger">87</span>
<small>each</small>
</p> <br>

Answer 1

Although using a monospace font is a nice workaround, you could solve this with your original font if it has the correct OpenType features.
The difference in the space that a digit occupies is caused by the width of the digit (as opposed to kerning or letter spacing, as suggested in the other answers). The width is proportional — the 1 is narrower than the 4.
But a font can also offer tabular figures, where each digit is of equal width:
You can enable this in CSS with font-feature-settings: 'tnum';. Or to use other OpenType features and take care of browser inconsistencies, see Utility OpenType.

Answer 2

That is the issue of letter spacing of the font. You should use a monospace font to achieve same spacing for all characters.
Try the below snippet.
.bigger {
font-size: 40px;
}
p {
font-family: monospace;
}
<p>
<span class="bigger">81</span>
<small>each</small>
</p> <br>
<p>
<span class="bigger">84</span>
<small>each</small>
</p> <br>
<p>
<span class="bigger">87</span>
<small>each</small>
</p> <br>

Answer 3

The character 1 (and 7 sometimes) would usually be spaced out in most fonts. If you want uniform spacing, you should consider using monospace fonts.
Another improvement that you can make to your code is removing the spaces between tags.
Please check the code below:
#import url('https://fonts.googleapis.com/css?family=Spectral');
#import url('https://fonts.googleapis.com/css?family=Open+Sans|Spectral');
.bigger {
font-size: 40px;
}
p {
font-family: 'Open Sans', sans-serif;
}
<p>
<span class="bigger">81</span><small>each</small>
</p> <br>
<p>
<span class="bigger">84</span><small>each</small>
</p> <br>
<p>
<span class="bigger">87</span><small>each</small>
</p> <br>