JSFiddle - React, Tailwind, and code Playground

by tonyleeper

HTML

<div class="modal-container">
  <div class="modal">
  <div class="left">
    
  </div>
  <div class="right">
    <div class="header">Hello Header</div>
    <div class="content">Hello Content. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eaque est, animi deleniti, nulla recusandae autem accusamus, dolor ab nobis impedit ea harum! Nulla aliquam, cupiditate, saepe eveniet voluptate iure at?Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eaque est, animi deleniti, nulla recusandae autem accusamus, dolor ab nobis impedit ea harum! Nulla aliquam, cupiditate, saepe eveniet voluptate iure at?</div>
  </div>
</div>
</div>

CSS

.modal-container {
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  background-color: rgba(69, 75, 83, 0.5);
  
  display: flex;
  justify-content: center;
  align-items: center;
}

.modal {
  width: 200px;
  background-color: #fff;
  border: 1px solid #ddd;
  
  display: flex;  
  max-height: calc(100% - 40px);
}

.left {
  flex: 0 0 47px;
  background-color: red;
}

.right {
  flex: 1 1 100%;
  display: flex;
  flex-direction: column;
}

.header {
  background-color: green;
  flex: 0 0 30px;
  line-height: 30px;
}

.content {
  background-color: blue;
  flex: 1 1 100%;
  max-height: calc(100% - 30px);
  overflow: auto;
}