title: Using a transform to build a drawer
body: <p>In the following codepen I have a drawer that open/closes by clicking on the header. The mechanism by which this works is a CSS transform which sets the drawer contents to <code>translate3d(0, calc(-100% - 0.7em), 0);</code></p>
  
  <p>When closed. Currently content below the drawer is pushed down by the height of the drawer items when they are hidden.</p>
  
  <p>I would like the height of the closed drawer to be the height of the button when closed.</p>
  
  <p>What am I doing wrong?</p>
  
  <p><a href="https://codepen.io/matthewp/pen/YRzjvP" rel="nofollow noreferrer">https://codepen.io/matthewp/pen/YRzjvP</a></p>