JSFiddle - React, Tailwind, and code Playground

HTML

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css">
<div class="flex-container flex-column main-containere video-container">
  <div class="communication-controls d-flex justify-content-between">
    <div class="left-controls d-flex flex-column justify-content-between">
      <button class="chat-toggle">
        Chat
        <div class="indicator bg-red"></div>
      </button>

      <button class="mic-toggle">
        Mic
      </button>
    </div>

    <div class="right-controls d-flex flex-column justify-content-between">
      <button class="speaker-toggle">
        Headset
      </button>

      <button class="dismiss-call red align-self-center">
        <span>Hang up</span>
      </button>
    </div>
  </div>
</div>

SCSS

.video-container {
  background-color: black;
  width: 100%;
  height: 100%;
}

html,
body {
  height: 100%;
}

.communication-controls {
  height: 100%;
}

.right-controls,
.left-controls {
  background-color: rgba(grey, .5);
}