How to size column height properly in Tailwind?

Issue

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>

enter image description here

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:
enter image description here

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:
enter image description here
enter image description here

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/

Solution

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

Answered By – stickyuser

Answer Checked By – Candace Johnson (AngularFixing Volunteer)

Leave a Reply

Your email address will not be published.