How to make flexbox sibling shrink to prevent text wrap

Using Tailwind, I have a div and two children that are flexbox. When the screen size gets small, the first child doesn’t shrink to give its sibling room. How do I fix this?

When I add flex-shrink-0 to the second child it overflows.

https://play.tailwindcss.com/UmXXkuJqk3?size=364×720

>Solution :

You are facing this because of the input tag as by default input tags have minimum width of 100%.

To overcome this add w-full class inside the input tag.

Code: tailwind-play

Output (Before)

Output (After)