How to size column height properly in Tailwind? - html

Question

I'm learning Tailwind (migrating from bootstrap) and I'm struggling to figure out how to appropriately size column heights. Here I have a 2-column layout:
<div id="app" class="bg-slate-200 h-screen p-4" data-v-app="">
<div class="w-full h-full">
<div class="columns-2">
<div class="rounded p-4 bg-white">
<h1 class="text-3xl">Box 1</h1>
<div class="columns-1 space-y-2">
<div class="w-full"><button class="rounded border border-green-400 p-2 text-green-600 w-full">Button 1</button></div>
<div class="w-full"><button class="rounded border border-green-400 p-2 text-green-600 w-full">Button 2</button></div>
</div>
</div>
<div class="rounded p-4 bg-white">
<h1 class="text-3xl">Box 2</h1>
<div class="columns-1 space-y-2">
<div class="w-full"><button class="rounded border border-green-400 p-2 text-green-600 w-full">Button 1</button></div>
<div class="w-full"><button class="rounded border border-green-400 p-2 text-green-600 w-full">Button 2</button></div>
</div>
</div>
</div>
</div>
</div>
This renders just fine when the content is equal height. However, when I make one of the columns shorter, like so:
<div id="app" class="bg-slate-200 h-screen p-4" data-v-app="">
<div class="w-full h-full">
<div class="columns-2">
<div class="rounded p-4 bg-white">
<h1 class="text-3xl">Box 1</h1>
<div class="columns-1 space-y-2">
<div class="w-full"><button class="rounded border border-green-400 p-2 text-green-600 w-full">Button 1</button></div>
<div class="w-full"><button class="rounded border border-green-400 p-2 text-green-600 w-full">Button 2</button></div>
</div>
</div>
<div class="rounded p-4 bg-white">
<h1 class="text-3xl">Box 2</h1>
<div class="columns-1 space-y-2">
<div class="w-full"><button class="rounded border border-green-400 p-2 text-green-600 w-full">Button 1</button></div>
</div>
</div>
</div>
</div>
</div>
I get the following result:
You can see some of the bottom padding for the first column is cut off by its parent not being tall enough, and there is some extra padding added on the top of the second column.
Here's what the box layout looks like in the inspector:
The expected behavior would be the parent 2-column element sizing its height to be tall enough so that it does not clip the taller column. The shorter column should also be top-aligned without that weird extra top margin.
Here's a live example, any help would be greatly appreciated! https://jsfiddle.net/xm9g4jfr/1/

Answer 1

The columns property is designed for flowing text into multiple columns so I wouldn't recommend using it in this case.
If you take out columns-2 and replace it with a grid layout, grid grid-cols-2 gap-x-6, that should give you what you are after.
https://play.tailwindcss.com/EDzOYOTSnU

Answer 2

You can do this for a larger screen
<link href="https://unpkg.com/tailwindcss#^2/dist/tailwind.min.css" rel="stylesheet" />
<div class="container mx-auto bg-gray-300 p-6">
<div class="flex flex-col">
<div class="-mx-4 flex flex-col items-stretch lg:flex-row">
<div class="flex-1 p-4">
<div class="block h-full overflow-hidden rounded-lg border bg-white shadow-md transition ease-in-out sm:flex-row">
<div class="p-4 sm:ml-16 md:ml-32 lg:ml-0">
<!-- heading -->
<div class="-mx-2 flex flex-wrap sm:mx-auto sm:mb-2">
<div class="p-4">
<h1 class="text-3xl">Box 1</h1>
<div class="space-y-2">
<div ><button class="w-96 rounded border border-green-400 p-2 text-green-600">Button 1</button></div>
<div ><button class="w-96 rounded border border-green-400 p-2 text-green-600">Button 2</button></div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="flex-1 p-4">
<div class="block h-full overflow-hidden rounded-lg border bg-white shadow-md transition ease-in-out hover:cursor-pointer sm:flex-row">
<div class="p-4 sm:ml-16 md:ml-32 lg:ml-0">
<!-- heading -->
<div class="-mx-2 flex flex-wrap sm:mx-auto sm:mb-2">
<div class="p-4">
<h1 class="text-3xl">Box 1</h1>
<div class="space-y-2">
<div ><button class="w-96 rounded border border-green-400 p-2 text-green-600">Button 1</button></div>
<div ><button class="w-96 rounded border border-green-400 p-2 text-green-600">Button 2</button></div>
<div ><button class="w-96 rounded border border-green-400 p-2 text-green-600">Button 1</button></div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>