JSFiddle - React, Tailwind, and code Playground

HTML

<div id="pgzone">
                <video preload="auto" autoplay="true" width="100%" src="http://www.w3schools.com/html/mov_bbb.mp4" id="player"/>

              </div>

              <div id="ppzone">

                <div id="pp1">  
                </div>

                <div id="pp2">
                </div>

              </div>

CSS

#pbzone{
	height: 80%;
	position: relative;
	background-color: #0e0e0e;
}

#ppzone{
	position: absolute;
    bottom: 0;
    top: 39.25%;
    background-color: green;
}

#pgzone{
  border-style: solid;
  width: 500px;
  height: 600px;
  border-width: 1px;
}