JSFiddle - React, Tailwind, and code Playground

HTML

<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<div class ='profileName'>
   <hr>
   <span class='name'>Content</span>
</div>
<div class ='profile'>
    <div class='floatRightImg padded'>
        <img src='http://www.polpenuil.it/convenzioni/images/smile.jpg' class='shadow'/>
    </div>
    <p>description</p>
</div>

CSS

hr {
color: #CCCCCC;
}

.floatRightImg {
float: right;
}

.profile {
height: 450px;
width: 700px;
margin: auto;
}

.profileName {
width: 700px;
margin: auto;
}

.shadow {
box-shadow: 10px 10px 5px #888888;
}

.padded {
padding: 0 30px 0 15px;
}

.name {
background-color: #FFFFFF;
color: #CCCCCC;
left: 70px;
padding: 0 8px;
position: relative;
top: -20px;
font-weight: bold;
font-size: 20px;
}

.name:hover {
cursor:pointer;
}

JavaScript

$(document).ready(function(){

            $(".name").click(function(){
                var toBeSlided = $(this).parent("div").next("div");
                if(toBeSlided.is(":visible")) {
                    toBeSlided.slideUp();
                } else {
                    toBeSlided.slideDown();
                }
            });

        });