Instead of having to widen the user cards to keep everything on one line each time this occurs due to the counts growing or even any unrelated layout changes, I suggest just letting the badge counts wrap, and instead adding display: inline-block
to each badge count so at the very least the number doesn't get separated from the badge when wrapping:
.-flair > span:not(.reputation-score) {
display: inline-block;
margin-right: 3px;
margin-left: 2px;
}