main content div side by side

Question

I'm trying to set up a landing page with a header/footer, and in the middle will be four divs. I need them to be side by side. I am using Tailwind CSS. I am not sure what I am doing wrong, which is annoying because I have done this 100 times in the past.

<div class="flex flex-col h-screen justify-between">
    <div class="relative flex items-top justify-center h-16 
        bg-gray-100 dark:bg-gray-900 sm:items-center sm:pt-0">
    </div>
    <div class="flex flex-col h-screen bg-white">
        <div class="min-h-full w-1/4 bg-gray-200">
        </div>
        <div class="min-h-full w-1/4 bg-gray-400">
        </div>
        <div class="min-h-full w-1/4 bg-gray-600">
        </div>
        <div class="min-h-full w-1/4 bg-gray-800">
        </div>
    </div>
    <div class="h-14 bg-gray-100 dark:bg-gray-900 
        sm:items-center sm:pt-0">
    </div>
</div>
</template>

Answer 1

WOW I cannot believe I did that.

In the middle div, I needed to put flex-row NOT flex-col

The middle should look like this now.

<div class="flex flex-row h-screen bg-white">
            <div class="min-h-full w-1/4 bg-gray-200">

            </div>
            <div class="min-h-full w-1/4 bg-gray-400">
                
            </div>
            <div class="min-h-full w-1/4 bg-gray-600">
                
            </div>
            <div class="min-h-full w-1/4 bg-gray-800">
                
            </div>

        </div>

Answer 2

If I was the one doing that I would have done this way.

My output:

   <div class="sm:grid grid-cols-3 gap-10  w-4/5 mx-auto py-5 border-gray-200 ">
        <div
            class="bg-gray-100 dark:bg-gray-900 sm:pt-0">1
        </div>
        <div class="bg-white">2
            <div class="min-h-full w-1/4 bg-gray-200">
                a
            </div>
            <div class="min-h-full w-1/4 bg-gray-400">
                b
            </div>
            <div class="min-h-full w-1/4 bg-gray-600">
                c
            </div>
            <div class="min-h-full w-1/4 bg-gray-800">
                d
            </div>
        </div>
        <div class="h-14 bg-gray-100 dark:bg-gray-900 
        sm:items-center sm:pt-0">3
        </div>
    </div>