Align items on the same line in mobile view

[arjunrao87]

Hi Tailwind friends,

I am a bit of a CSS noob, so please be patient with me! I am trying to build a navbar with an icon and a button and want it to show up on the same line (whether its at small or large form factors). I am using Tailwind 2.0.2.

However, I am unable to align the Suggest box with the icon in the same line in mobile view. The Suggest box ends up in the next line when you minimize screen size. You can check a codepen to show what I mean - https://codepen.io/arjunrao87/pen/bGwvKez

Can someone tell me what I am missing here? Thanks!

[simonswiss]

Hey!

The problem is that on mobile view, you have both the logo and the button as flex containers, instead of sitting within the same flex parent.

I copied your CodePen code over to a Tailwind Play example, and here's what I modified in the mobile view:

1. removed flex justify-start and flex justify-end utilities on the logo / button elements
2. wrap both the logo and button elements in a div with flex justify-between classes instead
3. add flex-1 to the logo element to make it take all the available space outside of the button, so both elements are left and right aligned.

Here's the code where you can see your layout working properly:

https://play.tailwindcss.com/jR7mLtn93t

Hope it helps 👍

[arjunrao87]

Ah fascinating! Thanks a lot for the help. Just putzing around it a bit more, it looks like 1 & 2 are pretty much all I need to get the outcome I want (without needing to do the flex-1), although I fully acknowledge I am probably not understanding a nuance which flex-1 provides.

What I don't really understand is why the below code (also copied in this Play) doesn't work (in this case I have just removed the justify-between in the parent and replaced it with justify-start for the logo and justify-end for the button. My naive understanding of this would have been that if the parent had flex, the underlying elements declaring the justify syntax would have been sufficient for the alignment i needed (where the button should actually be right-aligned)

        <div class="rounded-lg shadow-lg bg-white flex w-full">
            <div class="py-6 px-5 justify-start">
                <a href="#">
                <img class="h-8 sm:h-10" src="https://tailwindui.com/img/logos/workflow-mark-indigo-600.svg" alt="amass">
                </a>
            </div>
            <div class="py-6 px-5 justify-end">
                <a href="#" class="flex justify-center px-4 py-2 border border-transparent rounded-md shadow-sm text-base font-medium text-white bg-pink-500 hover:bg-pink-700">
                Suggest
                </a>
            </div>
        </div>