I had a FE tech test for a company and part of it included some Figma designs to create a paragraph background like these images; key bits are that the last line is cut back, and the outer width is as wide as the longest line. The corners are rounded and the internal bottom right is a reverse radius. If the bottom line is long enough so that the reverse radius collides with the right hand side, then the bottom line background jumps to match the edge. It’s a really nice effect tbh I quite like it.

I couldn’t work out how to do this in CSS and was failed because of it.

I used React and split all the words into spans, letting them wrap based on the container div size. As I then used JS to colour in the background; I had 1 re-render on first draw then window resize required 2 re-renders, which were called out as the reasons for the fail. They have refused to tell me how it should be done without re-renders (and I guess without JS?) so I come to the Knowledgable Ones to please tell me how!!

I can share my repo if you like.