Wrap parent div around scaled child div

Trying to work out how to wrap parent div around scaled child div.

HTML

<div class="content-wrapper">
<div class="content">
<p>Bravo charlie delta echo foxtrot golf hotel india juliet lima mike november oscar papa quebec romeo sierra tango uniform victor whiskey x-ray yankee zulu.</p>
<ol>
<li>Alpha bravo charlie delta echo</li>
<li>Foxtrot golf hotel india juliet lima oscar papa quebec romeo</li>
<li>Uniform victor</li>
<li>Whiskey x-ray yankee zulu</li>
</ol>
<p>Alpha bravo charlie echo foxtrot golf india juliet kilo mike november oscar papa quebec sierra tango uniform victor x-ray yankee. Charlie delta echo foxtrot india juliet mike oscar papa sierra uniform victor. Alpha charlie echo golf hotel india kilo papa tango uniform victor whiskey x-ray yankee zulu. Charlie delta echo foxtrot golf hotel india juliet kilo oscar papa quebec sierra tango uniform victor x-ray yankee zulu.</p></div>
 <div class="open-button">
 +
 </div>
</div>
<p>
  Would like light blue box to shrink & wrap around black button while content is closed.
</p>

CSS

body {
  background: #fff;
  color: #333;
  font-family: Sans-serif;
}

.content-wrapper {
  display: inline-block;
  background-color: #ddf;
  padding: 10px;
  clear: both;
}

.content {
  padding: 10px;
  background-color: #fff;
  display: flex-block;
  overflow: hidden;
  transform:scale(0,0);
  transform-origin:top; 
  transition:all 1s ease-out; 
  max-width: 0;
  max-height: 0;  
}

.content.open {
  transform:scale(1,1);
  max-width: 100%;
  max-height: 500px;
}

.open-button {
  background-color: #333;
  color: #fff;
  float: right;
  padding: 5px;
}

JavaScript

$('.open-button').on('click', function(){
	$('.content').toggleClass('open');
});