Mouse leave after editing div height

When I hover over #hoverme, I want #header to change the height. But I also want it to go back to normal, once the mouse has left #hoverme.

Does anyone know how to do this? My jsfiddle doesn't seem to work as intended.

JAVASCRIPT

$(document).ready(function(){
  $('#hoverme').on('mouseover', function(){
    $('#header').css('height', '500px');
  });

  $('#header').on('mouseout', function(){ 
    $('#header').css('height', '100px');
  });
});

HTML

<div id="header">
  <div id="hoverme">hover over me</div>
</div>

CSS

#header { 
    height:100px;
    border:1px solid red;
}