JSFiddle - React, Tailwind, and code Playground

by agib

HTML

<table>
  <tr>
    <td>
    <div class="cell-1">
    cell cellcellcell cellcellcell cellcellcellcellcellcellcellcellcellcellcellcellcell cellcellcellcell cellcellcellcellcellcell cellcellcellcellcellcellcellcellcellcellcellcellcell cellcellcell cellcellcellcellcellcellcellcellcell cellcellcellcellcell cellcellcellcellcell cellcellcellcellcellcellcell
    </div>
    </td>
    <td class="grid">
    <div class="cell-2">
      <button class="button">Cell 2</button>
    </div>
    
    </td>
  </tr>
</table>

<h2>Flex</h2>
<div class="row">
  <div class="col">
    <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!</div>
    <div>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>
  <div class="col">
    <button class="inner">Col</button>
  </div>
</div>


<h2>Stack overflow</h2>

<div class="container">
  <div class="flex-1">Flex 1</div>
  <div class="flex-2">
    <div class="flex-2-child">Flex 2 child</div>
  </div>
</div>

CSS

table {
  width: 100px;
}

.grid { 
 display: grid;
 border: 1px solid gray;
 height: 100%;
}

.cell-1 {
  background-color: fuchsia;
}

.cell-2 {
  background-color: yellow;
}
.button {

}

/* Next iteration */

.row {
  display: grid;
  grid-template-columns: 200px 1fr;
}

.col {
  display: grid;
  border: 2px solid blue;

}

.inner{
  background-color: fuchsia;
}

/* Stack overflow */


container {
  height: 200px;
  display: flex;
  flex-direction: row;
}
.flex-1 {
  width: 100px;
  background-color: blue;
}
.flex-2 {
  position: relative;
  background-color: red;
  align-items: stretch;
}
.flex-2-child {
  background-color: green;
}