JSFiddle - React, Tailwind, and code Playground

HTML

<div class="button">CLICK</div>
<div class="box left">
    <img src="http://www.hisstank.com/gi-joe-news/attach/4/2/0/1/1/HISS-TANK-GI-Joe-Retaliation_1337097501.jpg" />
</div>
<div class="box right">
    <div class="video">
    </div>
</div>

CSS

.box{
    width:50%;
    background:#ddd;
    height:200px;
    text-align:center;
}
.left{
    float:left;}
.right{
    float:right;}

img{
    display:inline-block;
    max-width:100%;
    max-height:100%;
    vertical-align: middle;
}
.video{
    width:100%;
    height:100%;
    background:#888;
}

JavaScript

$(function(){
    $('.button').click(function(){
        $('.box img').attr('src','http://photojournal.jpl.nasa.gov/jpeg/PIA17555.jpg');
    });
});