nested flexbox with text truncation [duplicate]

I have a set of nested flexboxes, each with a flex-1 div on the left and a fixed width div on the right. I want the inner-most left div to take up available space and truncate its text if necessary.

Here is an example I prepared: Tailwind Play

Resize the window to see what happens with the text in each case.

Example A shows the problem I am seeing where the text does not truncate.Example B shows a single flexbox where the text does truncate.

What changes are needed on Example A so that the text does truncate?

Thanks!