jquey/css question

I have the following code below.

I'm trying to get the rounded corners piece to just slide down when clicked.  I cannot quite get it right.

Basicallty I want "panel" to be taller and start above the "flip".

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script> 
$(document).ready(function(){
    $("#flip").click(function(){
        $("#panel").slideToggle("slow");
    });
});
</script>

<style> 
  .container-cta{
     width: 250px;
    float: right;
  }
.main-cta{
height: 25px;
}
#panel, #flip {
    padding: 5px;
    text-align: center;
width: 400px;
-webkit-border-radius: 0px 0px 60px 60px;
-moz-border-radius: 0px 0px 60px 60px;
border-radius: 0px 0px 60px 60px;
background-color:#E3A20B;
}

#panel {
 padding: 5px;
    display: none;
width: 400px;
-webkit-border-radius: 0px 0px 60px 60px;
-moz-border-radius: 0px 0px 60px 60px;
border-radius: 0px 0px 60px 60px;
background-color:#E3A20B;
}
</style>
<div class="container-cta">
<div id="flip">Click to slide the panel down or up</div>
<div id="panel">Hello world!</div>
  </div>

                                          

Select allOpen in new window