main content div side by side-CodePudding

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 >
    <div >
    </div>
    <div >
        <div >
        </div>
        <div >
        </div>
        <div >
        </div>
        <div >
        </div>
    </div>
    <div >
    </div>
</div>
</template>

CodePudding user response：

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 >
            <div >

            </div>
            <div >
                
            </div>
            <div >
                
            </div>
            <div >
                
            </div>

        </div>

CodePudding user response：

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

My output:

   <div >
        <div
            >1
        </div>
        <div >2
            <div >
                a
            </div>
            <div >
                b
            </div>
            <div >
                c
            </div>
            <div >
                d
            </div>
        </div>
        <div >3
        </div>
    </div>