// tempory fix the outer div's width
$("#1").css({width: ("#2").width()});
// fade out inner div
$("#2").fadeOut('slow' , function(){
    // change the div content
    $("#1").html("<div id=\"2\" style=\"display: none;\">new content (with a new width)</div>", function(){
        // give the outer div the same width as the inner div with a smooth animation
        $("#1").animate({width: $("#2").width()}, function(){
                // show the inner div
                $("#2").fadeIn('slow');
        });
    });
});