title: How to keep individual grid column height in tailwind
body: <p>In the below example (see the tailwind play here: <a href="https://play.tailwindcss.com/wUWT1PCfEU" rel="nofollow noreferrer">https://play.tailwindcss.com/wUWT1PCfEU</a>), if the first <code>&lt;details&gt;</code> is open, the height of the other columns will increase with it.</p>
  <pre class="lang-html prettyprint-override"><code>&lt;div class=&quot;grid grid-cols-1 sm:grid-cols-3&quot;&gt;
    &lt;div class=&quot;bg-gray-400&quot;&gt;
      &lt;details&gt;
        &lt;summary&gt;aaaa&lt;/summary&gt;
  Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed in dui vitae nunc porta finibus eu ut turpis. Donec rhoncus, mauris at fringilla ullamcorper, nibh lacus laoreet sapien, non viverra lectus diam non dolor.
      &lt;/details&gt;
    &lt;/div&gt;
    &lt;div class=&quot;bg-green-400&quot;&gt;
      &lt;details&gt;
        &lt;summary&gt;bbbb&lt;/summary&gt;
        A small text
      &lt;/details&gt;
    &lt;/div&gt;
    &lt;div class=&quot;bg-purple-400&quot;&gt;
      &lt;details&gt;
        &lt;summary&gt;cccc&lt;/summary&gt;
        A medium text
      &lt;/details&gt;
    &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  <p>How can this be prevent and each column has individual height?</p>