css - 含まれている div が縮小するときに、テキストが複数の行に折り返されないようにしますか?

Question

テキストを含むdivと、すべてを縮小するアニメーション付きの画像を表示および非表示にしようとしています。含まれている div が非表示になる前に縮小するため、テキストが複数の行に折り返される方法が気に入らないことを除いて、かなりうまく機能しています。テキストがこれを行うのを止めて、1行にとどめることは可能ですか?

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');
});