JSFiddle - React, Tailwind, and code Playground

by agib

HTML

<h2>
Table  (absolute position and other hacks)
</h2>
<table class="table">
  <tr>
    <td>
    <div class="cell-1">
    cell cellcellcell cellcellcell cellcellcellcellcellcellcellcellcellcellcellcellcell cellcellcellcell cellcellcellcellcellcell cellcellcellcellcellcellcellcellcellcellcellcellcell cellcellcell cellcellcellcellcellcellcellcellcell cellcellcellcellcell cellcellcellcellcell cellcellcellcellcellcellcell
    </div>
    </td>
    <td class="pos-relative">
     <div class="pos-absolute absolute-fill cell-2">
       <button class="pos-absolute absolute-fill"><span class="table-inner-grid" onclick="alert('Clicked in table!')">Button</span></button>
     </div>
      
    
    </td>
  </tr>
</table>

<h2>CSS Grid</h2>
<div class="d-grid outer-grid">
  <div>
    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eaque, dolorem nisi veniam quo sint placeat atque laudantium tempore delectus ipsa officiis ducimus, modi rerum, doloribus quidem facilis sed labore rem! Error ex ipsam, fugiat asperiores. Eos illum dolores, laboriosam officiis, obcaecati cum ratione cumque earum officia impedit facilis! Dolore tempora laudantium, delectus corporis qui debitis deleniti praesentium vero rem hic!
  </div>
  <div class="d-grid">
    <button class="btn" onclick="alert('Clicked in grid!')">Button</button>
  </div>
</div>

CSS

/* Table */

.table {
  width: 80vw;
}
.pos-relative {
  position: relative;
}
.pos-absolute {
  position: absolute;
}
.absolute-fill {
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
}

.cell-2 {
  width: 100px;
}
.table-inner-grid {
   display: grid;

}

/* CSS Grid */

.d-grid {
  display: grid;
}

.outer-grid {
  grid-template-columns: 1fr minmax(max-content, 10rem);
}