JSFiddle - React, Tailwind, and code Playground

by Abdul Ahmad

HTML

<div class='menu-navigator'>
  <div class='left-side'>
      <div class='menu-item'>
        <label>
          one
        </label>
      </div>
      <div class='menu-item'>
        <label>
          two
        </label>
      </div>
      <div class='menu-item'>
        <label>
          three
        </label>
      </div>
  </div>

  <div class='right-side'>
      <div class='menu-item'>
        <label>
          one
        </label>
      </div>
      <div class='menu-item'>
        <label>
          two
        </label>
      </div>
      <div class='menu-item'>
        <label>
          three
        </label>
      </div>
  </div>
</div>

SCSS

.menu-navigator {
  
  display: flex;
  background-color: white;
  flex-direction: row;
  align-items: stretch;
  margin: 10px;
  color: gray;
  font-size: 14px;
  box-shadow: 0 0 5px -1px;


  .left-side, 
  .right-side {
    display: flex;
    flex-direction: column;
    overflow-y: scroll;
    max-height: 300px;
    
    .menu-item {
      padding: 5px 0;
      min-height: 14px;
      
      
      label {
        display: block;
        width: 90%;
        margin: 0 auto;
      }
      label:hover {
        cursor: pointer;
      }
    }
    .menu-item:hover {
      cursor: pointer;
      background-color: #ddd;
    }
  }
  .left-side {
    width: 200px;
    background-color: #eee;
    border-right: 1px solid #ddd;
    .menu-item {
      
      label {
      }
    }
  }
  .right-side {
    flex-grow: 1;
    background: white;
    
    .menu-item {
      border-bottom: 1px solid #eee;
      padding: 15px 0;
      label {
      }
      label:hover {
        cursor: default;
      }
    }
    .menu-item:hover {
      cursor: default;
      background-color: #eee;
    }
  }
}