Tailwind CSS: How to Create Columns with the Same Height

In Tailwind CSS, we can use flex or grid utility class to create a layout with multiple columns sitting side by side (on the same rows) and all of the columns are equal in height.

Example

Screenshot:

This code produces the result above (the parent element has the flex utility class):

<body>
    <div class="flex m-20">
        <div class="w-1/4 bg-blue-500 p-5 flex flex-col">
            <div class="text-white flex-1">
                Some text
            </div>
            <button class="bg-white rounded-full mt-5 px-5 py-2">Action Button</button>
        </div>
        <div class="w-1/4 bg-amber-500 p-5 flex flex-col">
            <div class="text-white flex-1">
                Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam ut nibh et dolor vestibulum commodo eu in
                nulla. Etiam molestie diam at mollis mollis
            </div>
            <button class="bg-white rounded-full mt-5 px-5 py-2">Action Button</button>
        </div>
        <div class="w-1/4 bg-green-500 p-5 flex flex-col">
            <div class="text-white flex-1">
                Sed eget tortor ullamcorper, mollis nibh ut, pretium augue.
            </div>
            <button class="bg-white rounded-full mt-5 px-5 py-2">Action Button</button>
        </div>
        <div class="w-1/4 bg-cyan-500 p-5 flex flex-col">
            <div class="text-white flex-1">
                Short text
            </div>
            <button class="bg-white rounded-full mt-5 px-5 py-2">Action Button</button>
        </div>

    </div>
</body>

You can achieve the same thing like so (the parent element makes use of the grid utility class):

<body>
    <div class="grid grid-cols-4 gap-4 m-20">
        <div class="bg-blue-500 p-5 flex flex-col">
            <div class="text-white flex-1">
                Some text
            </div>
            <button class="bg-white rounded-full mt-5 px-5 py-2">Action Button</button>
        </div>
        <div class="bg-amber-500 p-5 flex flex-col">
            <div class="text-white flex-1">
                Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam ut nibh et dolor vestibulum commodo eu in
                nulla. Etiam molestie diam at mollis mollis
            </div>
            <button class="bg-white rounded-full mt-5 px-5 py-2">Action Button</button>
        </div>
        <div class="bg-green-500 p-5 flex flex-col">
            <div class="text-white flex-1">
                Sed eget tortor ullamcorper, mollis nibh ut, pretium augue.
            </div>
            <button class="bg-white rounded-full mt-5 px-5 py-2">Action Button</button>
        </div>
        <div class="bg-cyan-500 p-5 flex flex-col">
            <div class="text-white flex-1">
                Short text
            </div>
            <button class="bg-white rounded-full mt-5 px-5 py-2">Action Button</button>
        </div>

    </div>
</body>

That’s it. Happy coding & have a great day!

Next Article: Tailwind CSS: Make a Div 100% Height & Width of the Viewport

Previous Article: Tailwind CSS: Align an element to the left/right of its parent

Series: Basic Tailwind CSS Tutorials for Beginners

Tailwind CSS