JSFiddle - React, Tailwind, and code Playground

by Hugo Carneiro

HTML

<div class="container">
  <div class="parent-holder">
    <div class="spearkers-holder">
      Speakers here
    </div>
    <div class="zoom-holder">
      <div class="zoom-window">
        Zoom here
      </div>
    </div>
  </div>
</div>

CSS

html, body {
  height: 100%;
}

.container {
  width: 100%;
  height: 100%;
}

.parent-holder {
   width: 50%;
   height: 45%;
   margin: 0 auto;
   background: pink;
   display: flex;
}

.spearkers-holder {
  width: 25%;
  margin-left: -25%;
  background: red;
}

.zoom-holder {
  width: 100%;
  height: 100%;
  background: blue;
}