JSFiddle - React, Tailwind, and code Playground

by Per Andersson

HTML

<div class="dialogOverlay">
  <div class="dialogBase">

    <div class="bodyTitlebar">
      Title bar
    </div>

    <div class="bodyWrapper">
      <div class="bodySidebar">
        <h1>Side bar</h1>
        <p>side bar</p>
      </div>

      <div class="bodyContent">
        <h1>Body content Body content </h1>
        <p>body content</p>
        <h1>Body content</h1>
        <p>body content</p>
        <h1>Body content</h1>
        <p>body content</p>
        <h1>Body content</h1>
        <p>body content</p>
      </div>

    </div>
  </div>
</div>

CSS

.dialogOverlay {
  z-index: 600;
  position: absolute;
  left: 0;
  top: 0;
  height: 100vh;
  width: 100vw;
  background-color: rgba(0,0,0,0.4);
  display: flex;
  justify-content: center;
  align-items: center;
}
.dialogBase {
  position: relative;
  background-color: white;
  border: 1px solid black;
  z-index: 601;
  display: flex;
  flex-direction: column
}
.bodyTitlebar {
  background-color: gray;
  color: white;
  height: 50px;
  border-bottom: 1px solid black;
  padding: 5px;
  box-sizing: border-box;
}
.bodyWrapper {
  display: flex;
}
.bodySidebar {
  overflow: hidden;
  max-height: calc(75vh - 50px);        /*  compensate for title bar                      */
  width: 100px;
  padding: 5px;
  box-sizing: border-box;
}
.bodyContent {
  overflow-y: scroll;
  min-width: 20px;                      /*  side bar is 100 so we need the extra 20 here  */
  min-height: 70px;                     /*  title bar is 50 so we need the extra 70 here  */
  max-height: calc(75vh - 50px);        /*  compensate for title bar                      */
  max-width: calc(75vw - 100px);        /*  compensate for side bar                       */
  flex:1;
  padding: 5px;
  border-left: 1px solid black;
}