h1 Animate height with CSS transitions using scale()

.container
  button.btn click me
  
  .box
    p Lorem ipsum dolor sit amet, consectetur adipisicing elit. Fugit voluptatem, aliquid non omnis quas expedita commodi ducimus explicabo, earum. Omnis!
    
    p Lorem ipsum dolor sit amet, consectetur adipisicing elit. Possimus, accusamus.

@import url(https://fonts.googleapis.com/css?family=Roboto);

*
  box-sizing border-box

  &:before,
  &:after
    box-sizing border-box

html 
  font-family 'Roboto', sans-serif
  text-align center
  font-size 14px
  
body 
  font-size 1.6rem
  
h1 
  font-size 4rem
  line-height 5rem
  margin 4rem
  

.container 
  margin 4rem auto
  width 90%
  max-width 60rem

p
  line-height 2.2rem
  
  &:not(:last-child)
    margin-bottom 2rem
 
  
//- Button  
//---------------------------

.btn 
  bg = #09c 
  background #09c
  border 0
  color #fff
  cursor pointer
  display block
  font-size 1.4rem 
  padding 1.5rem 3rem
  transition background .2s
  width 100%
  
  &:hover
  &:focus 
    background darken(bg, 15%)
    
  &.in
    background darken(bg, 50%)
     
  
//- Box
//---------------------------

.box 
  background #e5e5e5 
  margin-left auto
  margin-right auto
  padding 3rem 
  text-align left
  transform scaleY(0)
  transition transform .3s
  transform-origin top left
  
  &.in 
    transform scaleY(1)

document.querySelector('.btn')
  .addEventListener('click', function (event) {
  
  event.currentTarget.classList.toggle('in')

  document.querySelector('.box')
    .classList.toggle('in')
})