JSFiddle - React, Tailwind, and code Playground

HTML

<div id="top" class="button">Click</div>
<div id="container">
    <div id="left">
        <p><span>Name:</span>Bubb Rubb</p> 
        <img id="pic" src="http://4.bp.blogspot.com/_8o-bd_Wib3M/Ro8VCeDdzcI/AAAAAAAAABQ/eKpHF_tHrhY/s400/bubb_rubb.jpg" alt="Bubb Rubb" height="150" width="180" />
    </div>
    <div id="right">
        <div id="titlecard">
            <p>Title</p>
        </div>
    </div> 
</div>

CSS

div#container{position:absolute; height:200px; width:100%;border:1px solid black; }
div#left{float:left;width:30%;height:100%;}
div#right{float:right;width:70%;height:100%;}
#titlecard{position:absolute; top:1em; bottom:1em; right:3em; width:65%; border:1px solid black;}
.button{height:1.3em; background-color:red;}
p{font-weight:bold; color:green;}
p span{margin-right:0.3em;color:black;}
#pic{position:absolute; padding:2px; top:2em;}

JavaScript

$(document).ready(function() {
    $('.button').click(function() {
        $('#container').stop(false).slideToggle(500, "swing"); //stop(false) prevents animation queueing
    });
});