JSFiddle - React, Tailwind, and code Playground

HTML

<script src="//code.jquery.com/jquery-1.10.2.min.js"></script>
<div id="div-1"><div id="div-2">Some content here</div></div>

CSS

.container {
    height:400px;
    width:400px;
    background:#ccc;
}
#resForm {
    float:left;
    width:200px;
    background:yellow;
}
.bookCommentsToggle {
    height:50px;
    cursor:pointer;
}
.bookComments {
    width:100px;
    height:300px;
    background:red;
    display:none;
}
.machine-right {
    float:right;
    height:50px;
    width:200px;
    background:blue;
}
.adjustPriceHeight {
    width:200px;
    background:#fff;
    float:right;
}

JavaScript

// cache selectors for better performance
var container = $('#div-1'),
    wrapper = $('#div-2');

// temporarily fix the outer div's width
container.css({width: wrapper.width()});
// fade opacity of inner div - use opacity because we cannot get the width or height of an element with display set to none
wrapper.fadeTo('slow', 0, function(){
    // change the div content
    container.html("<div id=\"2\" style=\"display: none;\">new content (with a new width)</div>");
    // give the outer div the same width as the inner div with a smooth animation
    container.animate({width: wrapper.width()}, function(){
        // show the inner div
        wrapper.fadeTo('slow', 1);
    });
});