DIV alignments using Tailwind CSS

Question

I have two **div**'s: one for logo and another for menu, they are aligned using **flex**.
When I start decreasing the screen size, menu **div** starts shrinking until some point, when one of the menu item (ABOUT US) looses alignment.
Then logo-**div** starts shrinking until the menu disappears. Please advice, how can I keep the menu item (ABOUT US) inline until the menu completely disappears and how can I make logo-**div** occupy full width and centered when menu is not visible?

Screen Visualisation:

HTML code :

 <nav class="item-center flex items-center"> <div class="bg-red-100 pl-5 py-1"> <a href="#"><img src="img/logo.svg" alt="Logo"></a> </div> <div class="flex-1"> <ul class="hidden sm:flex bg-blue-200 justify-end gap-12 text-red-500 uppercase text-s pr-5"> <li class="cursor-pointer ">Features </li> <li class="cursor-pointer ">Products </li> <li class="cursor-pointer ">Services </li> <li class="cursor-pointer ">About us </li> <li class="cursor-pointer ">Contact </li> </ul> </div> </nav>

Answer 1

I'd use whitespace-nowrap class for about us section and first thing that comes to my mind for logo is to add a minimum width to it, and flex grow , so that it can't go below certain width and once the menu disappears that it grows to the full width.

Answer 2

About wrapping

    <li class="cursor-pointer whitespace-nowrap">About us </li>

and about small screen check https://tailwindcss.com/docs/responsive-design#targeting-a-single-breakpoint and

    <div class="flex bg-red-100 pl-5 py-1 sm:pl-0 sm:w-full sm:justify-center">
  <a href="#"><img src="img/logo.svg" alt="Logo"></a>
</div>

Answer 3

I try to resolve your problem, check here