My text is overlapping with my components (React, CSS)

Question

I'm trying to format my CSS so that when someone makes their screen smaller, the text doesn't overlap with the search component underneath.

With overlap (undesired)

Without overlap (desired)

Is there any elegant way to do this other than manually changing the text width based upon the size of the screen? (e.g., responsive media queries).

Answer 1

Media queries, what’s your problem with it ?.. if you prefer less writing use tail-wind .. it will make that easier without writing media queries yourself.