The word 'City' breaks my layout in Safari only - html

Question

I have discovered what appears to be a very odd behaviour in Safari and I cannot figure out what is going on.
My layout as viewed in Chrome:
But when viewed in Safari I get the following:
For some bizarre reason the <small class="text-muted">(required)</small> portion of my HTML has been dropped to a new line.
Even more bizarrely, if I just change one letter in the word 'City', the layout becomes correct.
The same portion of my form but I have literally changed one thing and that is that I've changed the word 'City' to instead say 'Sity':
In fact, I seem to be able to use any word instead of 'City', but when I use the word 'City', the label suddenly takes up 2 lines. So, in light of this, there is an easy fix which is to just use the word 'Town' instead of the word 'City' but I would still like to know if this is just a really strange bug or if I'm missing something.
What on earth is going on here?
I was unable to recreate this issue in stack overflow's code snippet tool.
I am using Bootstrap 4 and the portion of HTML that I'm looking at is as follows:
<div class="form-row">
<div class="form-group needs-validation col-sm-6 col-md-6">
<label for="inputCity">City <small class="text-muted">(required)</small></label>
<input type="text" class="form-control" id="inputCity" name="city" required>
<div class="invalid-feedback">
Please provide your city.
</div>
</div>
<div class="form-group needs-validation col-sm-6 col-md-4">
<label for="inputState">State <small class="text-muted">(required)</small></label>
<input type="text" class="form-control" id="inputState" name="state" required
autocomplete="address-level1">
<div class="invalid-feedback">
Please provide your state.
</div>
</div>
<div class="form-group needs-validation col-5 col-sm-4 col-md-2">
<label for="inputZip">Zip <small class="text-muted">(required)</small></label>
<input type="text" class="form-control" id="inputZip" name="zip" required>
<div class="invalid-feedback">
Please provide your zip code.
</div>
</div>
</div>
EDIT Responding to Comments
#Rdg Replacing the space with does indeed fix the layout. But why does this only occur when followed by the word 'City' and nothing else (granted I haven't tested every word in the English language, so could it be something to do with the exact width of the word 'City'?)
#Geuis Yes I have finally managed to recreate this in codepen, it seems to be an issue with the font I am using ("Raleway") and the exact width of the word "City". https://codepen.io/Redtama/pen/RdRpqX
#Richard Uie I'm not sure what you mean by substitute the HTML entity for uppercase "c," i.e., &#67;, but with regards to the wrapping being caused by width, I can replace the word 'City' with something much longer and no wrapping takes place.
Example with Longer Label Text

Answer 1

I would recommend adding the following to your css forcing the text to become an inline element:
.text-muted {
display: inline-block;
}