JSFiddle - React, Tailwind, and code Playground

HTML

<div id="wrapper">

  <div class="player-wrapper">

    <div class="player-holder">

      <div class="player-thumb"></div>

    </div>

  </div>

  <div class="playlist-holder"></div>

</div>

CSS

#wrapper {
  position: relative;
  max-width: 800px;
  height: 100%;
  -moz-box-shadow: 1px 1px 10px 1px #ccc;
  -webkit-box-shadow: 1px 1px 10px 1px #ccc;
  box-shadow: 1px 1px 10px #888;
  margin: 0 auto;
  top: 100px;
}

#wrapper:after {
  content: "";
  display: block;
  clear: both;
}

.player-wrapper {
  float: left;
  width: 100%;
}

.player-holder {
  height: 360px;
  max-width: 400px;
  background: #fff;
  margin-right: 400px;
  overflow: auto;
}

.player-thumb {
  position: relative;
  margin-top: 50px;
  left: 0px;
  max-width: 400px;
  width: 100%;
  height: 260px;
  overflow: hidden;
  background: red;
}

.playlist-holder {
  position: relative;
  width: 400px;
  height: 360px;
  background: #ad3;
  margin-left: -400px;
  float: right;
}

@media only screen and (max-width: 700px) {
  .player-holder {
    margin-right: 0px;
    max-width: none!important;
  }
  .player-thumb {
    max-width: none!important;
    height: 320px;
  }
  .playlist-holder {
    width: 100%;
    clear: left;
  }
}