JSFiddle - React, Tailwind, and code Playground

by Alexander Mikhailian

HTML

<div id="table">
    <div class="contents"><!--level 1 -->
      <div class="tr">
        <div class="td">Row 1,
            <br/>Column 1</div>
        <div class="td">Row 1, Column 2</div>
      </div>
      <div class="contents"><!--level 2 -->
        <div class="tr">
          <div class="td">Row 2,
            <br/>Column 1</div>
          <div class="td">Row 2, Column 2</div>
        </div>
        <div  class="contents"><!--level 3 -->
          <div class="tr">
            <div class="td">Row 3,
            <br/>Column 1</div>
            <div class="td">Row 3, Column 2 Blum Blum Gulp gflkj gdfg d </div>
          </div>
        </div>
      </div>
    </div>
  </div>

CSS

width:100%
}
#table {
    display: table;
    padding: 5px;
    width:100%;
}
.tr {
    display: table-row;
    padding: 5px;
}
.td {
    display: table-cell;
    
    padding: 5px;
    border: #000000 solid 1px;
}

.contents {
  display:contents;
}