JSFiddle - React, Tailwind, and code Playground

HTML

<div class='wrapper'>


  <div class='stream-page-wrapper'>

    <div class='stream-page-top'>
      <div class='stream-page-main'>

        <div class='stream-wrapper'>
          <iframe width="560" height="315" src="http://www.youtube.com/embed/NlOF03DUoWc" frameborder="0" allowfullscreen></iframe>
        </div>

      </div>

      <div class='stream-page-aside'>
        <div class='overflow-chat'>
          <div class='stream-page-chat-wrapper'>
            <div class='chat-items'>
              <p>
                Hey there ther
              </p>
              <p>
                Hey there ther
              </p>
              <p>
                Hey there ther
              </p>
              <p>
                Hey there ther
              </p>
              <p>
                Hey there ther
              </p>
              <p>
                Hey there ther
              </p>
            </div>

          </div>

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

  </div>

SCSS

.stream-page-top {
  display: flex;
  .stream-page-main {
    flex: 5;
    .stream-wrapper {
      background-color: cornflowerblue;
      &:before {
        padding-top: 56.25%;
      }
    }
  }
  .stream-page-aside {
    flex: 2;
  }
  .stream-page-chat-wrapper {
    display: flex;
    flex-direction: column;
    background-color: #021117;
    width: 96%;
    height: 100%;
    margin: 0 auto;
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    padding: 10px;
    color: white;
    .chat-items {
      display: flex;
      flex-direction: column-reverse;
      overflow: auto;
      height: 200px;
    }
  }
}