JSFiddle - React, Tailwind, and code Playground

by klierik

HTML

<table class="layout">
  <tr>
    <td class="sidebar">

      <table class="data">
        <tr>
          <td>
            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Harum, suscipit recusandae minus sit voluptates ducimus perspiciatis quo voluptate obcaecati praesentium, neque debitis et necessitatibus temporibus sequi a officiis placeat at!</p>
          </td>
        </tr>
      </table>

    </td>
    <td class="td content">

      <table class="data">
        <tr>
          <td>
            <p><span>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Blanditiis impedit necessitatibus sit quia at, reiciendis animi similique exercitationem voluptates! Aut, facilis accusamus fuga enim a quidem iure fugiat optio dolorem.</span><span>Facilis, minus in architecto quae repudiandae! Id fugiat, numquam! Nemo aspernatur, temporibus incidunt deserunt, consequatur enim odit qui ducimus laudantium eligendi saepe quidem aut id. Voluptate tempore consequatur ex numquam.</span></p>
          </td>
        </tr>
      </table>

    </td>
  </tr>
</table>

SCSS

$line-height: 18px;
$layout-width: 100%;
//
$layout-sidebar-width: 25%;
$layout-sidebar-vertical-padding: 2%;
//
$layout-content-width: ($layout-width - $layout-sidebar-width);
$layout-content-vertical-padding: $layout-sidebar-vertical-padding;
//
body {
  font-size: 12px;
  
  padding: 2%;
  
  line-height: $line-height;
}

.layout {
  width: 100%;
  & > tbody > tr > td {
    height: 200px;
    border: 1px solid #aaa;
    vertical-align: top;
    p {
      span {
        display: block;
        & + span {
          margin-top: $line-height;
        }
      }
    }
  }
  .sidebar {
    padding: 0 $layout-sidebar-vertical-padding;
    width: $layout-sidebar-width;
  }
  .content {
    padding: 0 $layout-content-vertical-padding;
    width: $layout-content-width;
  }
}

.data {
  & > tbody > tr > td {
    border: 1px solid #f00;
  }
}