Slide in another div, from right to left, and adjust the height animated (jQuery)

I have a div with a login form and a button for "forgot password". I have another div with the forgot password form, i want to slide in, in front of the login div and adjustig the height, when "forgot button" is clicked. The entire box should be positioned

Illustration:

The HTML:

<div id="content">
    <div id="box">
        <div id="log_in">
            <p>LOG IN FORM</p>
            <p>LOG IN FORM</p>
            <p>LOG IN FORM</p>
            <p>LOG IN FORM</p>
            <p>LOG IN FORM</p>
            <div id="forgot">Forgot password?</div>
        </div>
        <div id="forgot_form">
            <p>FORGOT FORM</p>
            <p>FORGOT FORM</p>
            <p>FORGOT FORM</p>
        </div>
    </div>

</div>

CSS:

#content{
  background-color: blue;
  width:100%;
  height:900px;
}
#box{
  width: 200px;
  position: relative; 
  top: 20px; 
  left: 14px; 
  display: block;
  border:2px solid red;
  background-color: white;
  padding: 5px;
}
#forgot{
  cursor: pointer;
  color: blue;
}

This is what i got so far in jQuery:

$(document).ready(function () {
    $("#forgot_form").css({'display':'none'});
    $("#forgot").on("click", function () {
        $("#log_in").css({'display':'none'});
        $("#forgot_form").css({'display':'block'});
        $("#forgot_form").css({"left":"200px"}).animate({"left":"0px"}, "slow");
    });
});

JSFiddle example: https://jsfiddle.net/rLdfmf4n/4/