JSFiddle - React, Tailwind, and code Playground

by alanbeech

HTML

<div class="layout">

  <div class="master">
    <div class="detail">
      <div class="detail-inner">
        detail
      </div>
      
    </div>
  
      Lorem ipsum dolor sit amet, consectetur adipisicing elit. Deleniti blanditiis, soluta, tempora dolorum placeat numquam repudiandae sunt quasi totam et nobis ut laborum ad assumenda quidem voluptatibus facilis repellendus voluptatum.

    
  </div>
  
</div>

SCSS

$height: 500px;

.layout {
  width: 500px;
  height: $height;
  margin-left: auto;
  margin-right: auto;
  background-color: #eee;
  
  .master {
    border: solid 1px #ccc;
    height: 100%;
    
    .detail {
      position: relative;
      
      .detail-inner {
        position: absolute;
        height: $height;
        background-color: #222;
        right: 0;
        width: 66%;
        color: #fff;
      }
    }
    
  }
  
  
}