JSFiddle - React, Tailwind, and code Playground

by Marc Locchi

HTML

<div class="content-wrapper">

  <div id="main-container">

    <div id="hidden-container">

      <div id="plyr-container">
        <div id="plyra"></div>
        <div id="plyrb"></div>
      </div>

      <div id="info-container"></div>

    </div>

  </div>

</div>

CSS

.content-wrapper {
  margin: 10px auto 0 auto;
  box-sizing: border-box;
  border: 1px solid black;
  padding: 10px;
  width: 100%;
  max-width: 520px;
}

#main-container {
  position: relative;
  z-index: 1046;
  width: 100%;
  height: 300px;
  background-color: yellow;
}

#hidden-container {
  position: absolute;
  z-index: 1047;
  padding: 0;
  width: 100%;
  height: 100%;
  left: 0;
  top: 0;
  box-sizing: border-box;
  border: 1px solid green;
}

#plyr-container {
  position: relative;
  z-index: 1048;
  float: left;
  padding: 0;
  box-sizing: border-box;
  border: 1px solid red;
}

#info-container {
  float: right;
  z-index: 1048;
  width: 200px;
  height: 100%;
  background-color: grey;
}

#plyra,
#plyrb {
  position: absolute;
  z-index: 1049;
  width: 100%;
  height: 50%;
}

#plyra {
  left: 0;
  top: 0;
  height: 50%;
  background-color: purple;
}

#plyrb {
  left: 0;
  top: 50%;
  height: 50%;
  background-color: brown;
}