CSS Wrapping Issue: Prevent Words from Expanding to Fill Row on Wrap

I'm struggling with a Flexbox layout issue where I want a specific wrapping behavior for words inside a <span> classed as word-pair. The requirement is for the words to stay together on the same line as much as possible, wrapping to a new line only when the container is too narrow to fit them side by side.

Here is the CSS I'm currently using for the .word-pair:

.word-pair {    display: inline-flex;    flex-flow: wrap;    background-color: yellow;}

Desired Behavior:

1. The words within the word-pair should stay on the same line under normal conditions, even when that means moving all words together to a new line.
2. Only if the container's width is so small that all words cannot fit on a single line at all, should they break into separate lines.
3. Each word should only take up as much width as necessary when wrapped onto separate lines, and not expand to fill the entire width of the container.

Current Issue:Currently, when the container's width forces the words to wrap, the container stretches to occupy the full width of the available space, which is not desired. I need the words to wrap together to a new line however follow up content should also appear on the same line as the wrapped word and not on a separate line.

Attempts to Resolve:I have also tried using display: inline-block. Both attempts, however, have led to the words expanding to fill the full container width upon wrapping, which is not the desired outcome.

I am looking for a pure CSS solution that can facilitate this nuanced wrapping behavior. Does anyone have suggestions or insights on how to adjust CSS Flexbox or other properties to achieve this behavior?

Thank you in advance for your help and insights!