title: absolute item inside grid not taking full height as need
body: <p>in this code you can see a <code>white box</code> which is set to full height but its not taking full size only the highest box is taking full height is there any way to make it take full height for all white <code>absolute boxes</code> i am badly stuck any help is highly appreciable</p>
  <p>i want all white boxes to keep full height so i can center the red circle but i dont know why this boxes are taking different height although i have specified hull height for each
  i have used tailwind to i dont know if its tailwind issue or css3 grid</p>
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;link href="https://unpkg.com/tailwindcss@^2/dist/tailwind.min.css" rel="stylesheet"&gt;
  
  &lt;div class="grid grid-cols-3 gap-5"&gt;
    &lt;div class="border-b-8 border-green-600 bg-blue-300"&gt;
      &lt;div class="relative" style="min-height:150px;"&gt;
        &lt;p&gt;jaiosfjiowjeiowajefoiajwe&lt;/p&gt;
        &lt;p&gt;jaiosfjiowjeiowajefoiajwe&lt;/p&gt;
        &lt;p&gt;jaiosfjiowjeiowajefoiajwe&lt;/p&gt;
        &lt;p&gt;jaiosfjiowjeiowajefoiajwe&lt;/p&gt;
        &lt;p&gt;jaiosfjiowjeiowajefoiajwe&lt;/p&gt;
        &lt;p&gt;jaiosfjiowjeiowajefoiajwe&lt;/p&gt;
        &lt;p&gt;jaiosfjiowjeiowajefoiajwe&lt;/p&gt;
        &lt;p&gt;jaiosfjiowjeiowajefoiajwe&lt;/p&gt;
        &lt;p&gt;jaiosfjiowjeiowajefoiajwe&lt;/p&gt;
        &lt;p&gt;jaiosfjiowjeiowajefoiajwe&lt;/p&gt;
        &lt;p&gt;jaiosfjiowjeiowajefoiajwe&lt;/p&gt;
        &lt;p&gt;jaiosfjiowjeiowajefoiajwe&lt;/p&gt;
        &lt;p&gt;jaiosfjiowjeiowajefoiajwe&lt;/p&gt;
        &lt;p&gt;jaiosfjiowjeiowajefoiajwe&lt;/p&gt;
        &lt;p&gt;jaiosfjiowjeiowajefoiajwe&lt;/p&gt;
        &lt;p&gt;jaiosfjiowjeiowajefoiajwe&lt;/p&gt;
        &lt;p&gt;jaiosfjiowjeiowajefoiajwe&lt;/p&gt;
        &lt;p&gt;jaiosfjiowjeiowajefoiajwe&lt;/p&gt;
        &lt;p&gt;jaiosfjiowjeiowajefoiajwe&lt;/p&gt;
        &lt;p&gt;jaiosfjiowjeiowajefoiajwe&lt;/p&gt;
  
        &lt;div class="wrapp absolute z-10 border-2 bg-white h-full right-0 top-0 flex items-center -mr-12"&gt;
          &lt;svg class="" height="100" width="100"&gt;
            &lt;circle cx="50" cy="50" r="40" stroke="black" stroke-width="3" fill="red" /&gt;
            Sorry, your browser does not support inline SVG.
          &lt;/svg&gt;
        &lt;/div&gt;
      &lt;/div&gt;
    &lt;/div&gt;
  
    &lt;div class="border-b-8 border-green-600 bg-blue-300"&gt;
      &lt;div class="relative" style="min-height:150px;"&gt;
        &lt;p&gt;jaiosfjiowjeiowajefoiajwe&lt;/p&gt;
        &lt;p&gt;jaiosfjiowjeiowajefoiajwe&lt;/p&gt;
        &lt;p&gt;jaiosfjiowjeiowajefoiajwe&lt;/p&gt;
        &lt;p&gt;jaiosfjiowjeiowajefoiajwe&lt;/p&gt;
        &lt;p&gt;jaiosfjiowjeiowajefoiajwe&lt;/p&gt;
        &lt;p&gt;jaiosfjiowjeiowajefoiajwe&lt;/p&gt;
        &lt;p&gt;jaiosfjiowjeiowajefoiajwe&lt;/p&gt;
        &lt;p&gt;jaiosfjiowjeiowajefoiajwe&lt;/p&gt;
        &lt;p&gt;jaiosfjiowjeiowajefoiajwe&lt;/p&gt;
        &lt;p&gt;jaiosfjiowjeiowajefoiajwe&lt;/p&gt;
        &lt;p&gt;jaiosfjiowjeiowajefoiajwe&lt;/p&gt;
        &lt;p&gt;jaiosfjiowjeiowajefoiajwe&lt;/p&gt;
        &lt;p&gt;jaiosfjiowjeiowajefoiajwe&lt;/p&gt;
  
        &lt;div class="wrapp absolute z-10 h-full border-2 bg-white right-0 top-0 flex items-center -mr-12"&gt;
          &lt;svg class="" height="100" width="100"&gt;
            &lt;circle cx="50" cy="50" r="40" stroke="black" stroke-width="3" fill="red" /&gt;
            Sorry, your browser does not support inline SVG.
          &lt;/svg&gt;
        &lt;/div&gt;
      &lt;/div&gt;
    &lt;/div&gt;
  
    &lt;div class="border-b-8 border-green-600 bg-blue-300"&gt;
      &lt;div class="relative" style="min-height:150px;"&gt;
        &lt;p&gt;jaiosfjiowjeiowajefoiajwe&lt;/p&gt;
        &lt;p&gt;jaiosfjiowjeiowajefoiajwe&lt;/p&gt;
        &lt;p&gt;jaiosfjiowjeiowajefoiajwe&lt;/p&gt;
        &lt;p&gt;jaiosfjiowjeiowajefoiajwe&lt;/p&gt;
        &lt;p&gt;jaiosfjiowjeiowajefoiajwe&lt;/p&gt;
        &lt;p&gt;jaiosfjiowjeiowajefoiajwe&lt;/p&gt;
  
        &lt;div class="wrapp absolute z-10 border-2 h-full bg-white right-0 top-0 flex items-center -mr-12"&gt;
          &lt;svg class="" height="100" width="100"&gt;
            &lt;circle cx="50" cy="50" r="40" stroke="black" stroke-width="3" fill="red" /&gt;
            Sorry, your browser does not support inline SVG.
          &lt;/svg&gt;
        &lt;/div&gt;
      &lt;/div&gt;
    &lt;/div&gt;
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>