Stop text from wrapping onto multiple lines as its containing div shrinks?

Question

Im trying to show and hide a div containing text and an image with an animation that shrinks everything down to nothing. Ive got it working fairly well except I dont like the way the text wraps onto multiple lines as its containing div shrinks before its hidden. Is it possible to stop the text from doing this so it stays on one line?

http://codepen.io/anon/pen/FoJzx

<p class="open">Open</p>
<p class="close">Closed</p>

<div class="one">
    <img src="http://img.wallpaperstock.net:81/maggie-grace-portrait-wallpapers_14105_1600x1200.jpg" />    
    <p>Here is some text for div 1</p>
</div>

.one {
    transition: all 0.5s ease;
    width: 400px;
  background: grey;
}
.hide {
    width: 1px;
}
img {
    max-width: 100%;
    height: auto;
}
p {
  overflow: hidden;
}
$('.close').click(function(){
    $('.one').addClass('hide');
});
$('.open').click(function(){
    $('.one').removeClass('hide');
});

Answer 1

white-space is your friend. Add it to your p tag style

p {
    overflow: hidden;
    white-space: nowrap;
}

It will simply prevent the text inside the p from breaking into new line.

Updated codepen: http://codepen.io/anon/pen/Kyzpl