Help with wrapping

I have some items that are wrapping to a new line when the window width is reduced. Is there a way to have one of the items shrink and wrap the text it contains instead of kicking the whole item to a new line? I’m probably not explaining it well, so here’s some pictures:

This is what it looks like to start

This is what happens when the window width is reduced

But this is what I would like to happen instead

Any help is greatly appreciated.


Read-only link

Found a solution that works. Here’s the details in case someone else runs into the same issue.

Set the box with the text that should break to grow and gave it a maximum size and a minimum size. The maximum size keeps the box from stretching all the way to the right side of the area and the minimum size keeps the text from breaking to three lines. Then added a new div to act as a spacer which was set as flex and grow with a max width set to 15%. Took some trial and error to find a good value for the spacer max width.

The jpeg shows it working. I made the spacer red so it’s visible but it’s transparent in the actual version.