JSFiddle - React, Tailwind, and code Playground

by Salmin Skenderovic

HTML

<div class="right-panel">
  <div class="header">SCSS
    <h2>some header</h2>
  </div>

  <div class="f body overflow-hidden">
    <div class="f f-1">
      <!-- LEFT -->
      <div class="f-1 left-content f f-col">
        <h3>LEFT</h3>
        <div class="slideout-select__items h-100">
          <div class="it-grid h-100">
            <div class="table-container overflow-scroll h-100">
              <table>
                <thead>
                  <tr>
                    <th>a</th>
                    <th>b</th>
                  </tr>
                </thead>
                <tbody>
                  <tr>
                    <div class="x">x</div>
                    <div class="x">x</div>
                    <div class="x">x</div>
                    <div class="x">x</div>
                    <div class="x">x</div>
                    <div class="x">x</div>
                    <div class="x">x</div>
                    <div class="x">x</div>
                    <div class="x">x</div>
                    <div class="x">x</div>
                    <div class="x">x</div>
                    <div class="x">x</div>
                  </tr>
                </tbody>
              </table>
            </div>
          </div>
        </div>
      </div>
      <!-- RIGHT -->
      <div class="f-1 right-content f f-col">
        <h3>RIGHT</h3>
        <!-- <div class="it-grid f-1">
          <div class="overflow-scroll">
            <div class="x">x</div>
            <div class="x">x</div>
            <div class="x">x</div>
            <div class="x">x</div>
            <div class="x">x</div>
            <div class="x">x</div>
            <div class="x">x</div>
            <div class="x">x</div>
            <div class="x">x</div>
            <div class="x">x</div>
            <div class="x">x</div>
            <div class="x">x</div>
            <div class="x">x</div>
            <div class="x">x</div>
            <div class="x">x</div>
            <div...

SCSS

.right-panel {
  border: 1px solid green;
  border-left: 1px solid #e0e0e0;
  position: fixed;
  width: 51.4rem;
  top: 0;
  bottom: 0;
  right: 0;
  overflow-y: hidden;
  overflow-x: hidden;
  z-index: 200;
  background: #f5f5f5;
  flex-direction: column;
  display: flex;
  height: 100%;
  max-height: 100%;
}

.h-100 {
  height: 100%;
}

.mh-100 {
  max-height: 100%;
}

.left-content {
  border: 1px solid blue;
}

.right-content {
  border: 1px solid red;
}

.f {
  display: flex;

  &-col {
    flex-direction: column;
  }

  &-row {
    flex-direction: row;
  }

  &-1 {
    flex: 1;
  }
}

.overflow-scroll {
  overflow-y: scroll;
}

.overflow-hidden {
  overflow: hidden;
}

.align-items-end {
  align-items: end;
}

.x {
  height: 40px;
}