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 class="content-bg"></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;
  margin: 20px;
  font-family: Sans-serif;
}

.content-wrapper {
  display: inline-block;
  /* background-color: #ddf; */
  padding: 10px;
  clear: both;
  transition: all .75s ease;
  position: relative;
  z-index: 1;
}

.content-bg{
  position: absolute;
  z-index: 0;
  background-color: #ddf;
  left: 0;
  right: 0;
  bottom: 0;
  top: 0;
  z-index: -1;
  transition: all .5s ease;
  transform-origin: bottom right;
}

.open-content-bg{
  transform: scale(0,0);
}

.open-content-wrapper{
 /* background: none; */
 /* transform:scale(1,0); */
}

.open-button-border{
 border: 6px solid #dddeff;
   box-sizing: border-box;
  -wekbit-box-sizing: border-box;
}

.content-wrapper.open-wrapper{
  width: 30px;
  height: 30px;
  position: absolute;
}

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

.content.open {
  transform:scale(1,1);
}

.open-button {
  background-color: #333;
  color: #fff;
  float: right;
  padding: 5px;
  transition: all .25s ease;
  box-sizing: border-box;
  -wekbit-box-sizing: border-box;
}

JavaScript

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