Prevent reformatting of text as the div expands

Question

I use jquery to put some HTML in a div. After that, I would like to expand the div so that the element to the right of it moves as its width increases. Is there anyway to prevent text / HTML in a div that I am expanding by constantly reformatting myself as the width grows. Does it just seem that it is revealed, and not constantly collapsing?

$(document).ready(function(){ $('body').on('click', '#btn', function(){ var contents = $('#contentDiv').html(); $('#div2').append(contents).animate({'width':'100px'}, 1000); }); }); 

http://jsbin.com/oqosiz/1/edit

Answer 1

add inner div with set width and overflow: hidden;

animating the width of the div around the inner div:

http://jsbin.com/oqosiz/2/edit