JSFiddle - React, Tailwind, and code Playground

by magicaj

HTML

<div class="container table">
  <div class="row row-sm row-header">
    <div class="col col-8">
      <div class="content">Col 1 Row 1</div>
    </div>
    <div class="col col-4">
      <div class="content">Col 2 Row 1</div>
    </div>
  </div>
  <div class="row row-lg row-main">
    <div class="col col-main">
      <div class="content content-main">
        <div class="table">
          <div class="row row-sm">
            <div class="col col-nested-header">
              <div class="content">
                FEEDBACK
              </div>
            </div>
          </div>
          <div class="row">
            <div class="col col-center col-nested-main">
              Col 1 Row 2
            </div>
          </div>
        </div>
      </div>
    </div>
    <div class="col col-side">
      <div class="content content-side table">
        <div class="row">
          <div class="col">
            Col 2 Row 2.1
          </div>
        </div>
        <div class="row row-sm">
          <div class="col col-center">
            Col 2 Row 2.2
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

CSS

/* box-sizing */
html {
  box-sizing: border-box;
}

*, *:before, *:after {
  box-sizing: inherit;
}

/* force page to 100% */
html, body {
  height: 100%;
}

.container {
  border: 1px solid #666;
  width: 90%;
  height: 90%;
  margin: 20px auto;
}
  
/* table */
.table {
  display: table;
}

/* table row */
.row {
  display: table-row;
}

.row-sm {
  height: 1px;
}

/* table column */
.col {
  display: table-cell;
}

.col-8 {
  width: 66.6%;
}

.col-4 {
  width: 33.4%;
}

/* cell content */
.content {
  padding: 10px;
}


/* specific rows, columns */
.row-header {
  background-color: lightcoral;
}

.col-main {
  background: lightyellow;
  position: relative;
}

.content-main {  
  position: absolute;
  height: auto;
  bottom: 0;
  top: 0;
  left: 0;
  right: 0;
  margin: 10px;
}

.content-main .table {
  height: 100%;
  width: 100%;
}

.content-main .col {
  vertical-align: middle;
}

.content-main.content {
  padding: 0;
}

.col-side {
  background: lightgreen;
}

.content-side {
  height: 100%;
  width: 100%;
}

.col-center {
  text-align: center;
}

.col-nested-header {
  padding-bottom: 10px; 
}

.col-nested-header .content {
  padding: 5px;
  background: lightblue;
}

.col-nested-main {
  border: 1px dashed #666;
}