How can I make these two elements not overlap or "collide"?

So I've been setting up my own streaming page with VideoJS, all I want now is to have a chat, in this case, a Twitch chat iframe, side by side. This is what I have now.

The problem is the video element going under the chat frame. I want it to end where the chat frame starts, so they both line up nicely. If anyone could help me with this I'd be truly grateful.

Since Stackoverflow is forcing me to also put code in this post, here goes I suppose..

HTML:

<head>
  <link href="//vjs.zencdn.net/4.9.0/video-js.css" rel="stylesheet">
<script src="//vjs.zencdn.net/4.9.0/video.js"></script>
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
    <script src="//cdn.sc.gl/videojs-hotkeys/latest/videojs.hotkeys.min.js"></script>

</head>
<div id="sidebar-wrapper">
    <iframe frameborder="0" scrolling="no" src="http://twitch.tv/test/chat?popout=" height="100%" width="350">
    </iframe>
        </div>
<div class="wrapper">
  <div class="videocontent">
<video id="videostream" class="video-js vjs-default-skin vjs-big-play-centered vjs-fullscreen" controls  width="auto" height="auto">
<source src="http://vjs.zencdn.net/v/oceans.mp4" type='video/mp4'>
</video>
<script>
videojs("videostream", {}, function(){
// Player (this) is initialized and ready.
});
videojs('videostream').ready(function() {
  this.hotkeys({
    volumeStep: 0.1,
    seekStep: 5,
    alwaysCaptureHotkeys: true
  });
});
</script>
</div>
</div>

CSS:

.video-js {padding-top: 56.25%;
margin-right: 20px;
}
.vjs-fullscreen {padding-top: 0px}

#wrapper {
    padding-left: 0;
    -webkit-transition: all 0.5s ease;
    -moz-transition: all 0.5s ease;
    -o-transition: all 0.5s ease;
    transition: all 0.5s ease;
}

#wrapper.toggled {
    padding-left: 250px;
}

#sidebar-wrapper {
    z-index: 10000;
    position: fixed;
    right: 250px;
    width: 0;
    height: 100%;
    margin-right: -250px;

    background: #000;
    -webkit-transition: all 0.5s ease;
    -moz-transition: all 0.5s ease;
    -o-transition: all 0.5s ease;
    transition: all 0.5s ease;
}

#wrapper.toggled #sidebar-wrapper {
    width: 250px;
}

#page-content-wrapper {
    width: 100%;
    position: absolute;
    padding: 15px;
}

#wrapper.toggled #page-content-wrapper {
    position: absolute;
    margin-right: -250px;
}

/* Sidebar Styles */

.sidebar-nav {
    position: absolute;
    top: 0;
    width: 250px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.sidebar-nav li {
    text-indent: 20px;
    line-height: 40px;
}

.sidebar-nav li a {
    display: block;
    text-decoration: none;
    color: #999999;
}

.sidebar-nav li a:hover {
    text-decoration: none;
    color: #fff;
    background: rgba(255,255,255,0.2);
}

.sidebar-nav li a:active,
.sidebar-nav li a:focus {
    text-decoration: none;
}

.sidebar-nav > .sidebar-brand {
    height: 65px;
    font-size: 18px;
    line-height: 60px;
}

.sidebar-nav > .sidebar-brand a {
    color: #999999;
}

.sidebar-nav > .sidebar-brand a:hover {
    color: #fff;
    background: none;
}

@media(min-width:768px) {
    #wrapper {
        padding-left: 250px;
    }

    #wrapper.toggled {
        padding-left: 0;
    }

    #sidebar-wrapper {
        width: 350px;
    }

    #wrapper.toggled #sidebar-wrapper {
        width: 0;
    }

    #page-content-wrapper {
        padding: 20px;
        position: relative;
    }

    #wrapper.toggled #page-content-wrapper {
        position: relative;
        margin-right: 0;
    }

        #content
        {
            top: 0;
            bottom: 0;
            left: 0;
            display: hidden;
        }

Solution

You have set the width of your video container to 100% so it is taking the 100% of the width of its container (the webpage).

You can use calc function to get the behaviour intended because you have to rest the width of the chat(350px) from the 100% of the width of the container.

#videostream{
    width: calc(100% - 350px) !important;
}

Updated Codepen.