JSFiddle - React, Tailwind, and code Playground

HTML

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<div id="mainContentTable">
    <!-- INVITED CELL -->
    <div id="invitedToChatCell" class="content_cell content_cell_left">
        <div class="information_text">
            You have been invited to a room!
        </div>
        <div class="help_text">
             <span id="roomHelpText">What is a room?</span>
        </div>        
        <ul id="userChats" class="details_table" style="display:none;">
            <!-- PLACEHOLDER FOR CHAT LIST-->
        </ul>            
    </div>
</div>

CSS

#mainContentTable {
    /*position:relative;*/
    margin:0 auto;
    width:720px;
}

.content_cell {
    border-style: solid;
    margin:5px;
    padding:5px;
    cursor:pointer;
    width:300px;
    height:300px;
    overflow:auto;
}

.content_cell_left {
    float:left;
}

.details_table {
    height:700;
    width:640;
    list-style-type: none;
}

.information_text {
    margin-bottom:10px;
    font:Sans-serif;
    font-size:20px;
    font-style: bold;
}

.cloned_object {
    position:absolute;
    background-color:white;
    width: 700px;
    height: 640px;
    margin: 0; /*for centering purposes*/
    -webkit-transition: width 1s, height 1s, top 1s, left 1s, margin 1s;
    -moz-transition: width 1s, height 1s, top 1s, left 1s, margin 1s;
    -ms-transition: width 1s, height 1s, top 1s, left 1s, margin 1s ;
    transition: width 1s, height 1s, top 1s, left 1s, margin 1s;
}

JavaScript

// toggles animation to expand the square if clicked
$('.content_cell').on('click', function(event) {
            // if the user is on a browser older then IE9
            if ($.browser.msie && $.browser.version.substr(0,1)<10) {
                var $clonedElement = $( this ).clone(true).attr('class','cloned_object content_cell').appendTo('#mainContentTable');
                $clonedElement.css({left:$(this).position().left, 
                                    top:$(this).position().top, 
                                    opacity:1.0}) ;
                
                selectedPos = $(this).position();
                
                var currentPos = $('#invitedToChatCell').position();
                
                $clonedElement.animate({
                    height:640, width:700, 
                    //position:'absolute', 
                    left:currentPos.left, 
                    top:currentPos.top, 
                    opacity:1.0 
                }, 500, function(){ $('.cloned_object > ul').toggle(); });
                
            } else {
                var currentPos = $('#invitedToChatCell').position();
        
                var $clonedElement = $( this ).clone(true).attr('class', 'content_cell').appendTo('#mainContentTable');
                $clonedElement.css({left:$(this).position().left, 
                                    top:$(this).position().top}) ;
                
                $clonedElement.addClass('cloned_object');                
                $clonedElement.css({'margin-left':-$(this).position().left+125,
                                    'margin-top':-$(this).position().top,
                                    }) ;
                
                selectedPos = $(this).position();            
                
                $('.cloned_object > ul').toggle();
            }                    
            
            event.stopPropagation();
        });