Accordion Moving Up

HTML

<link rel="stylesheet" href="http://code.jquery.com/ui/1.8.21/themes/base/jquery-ui.css">
<link rel="stylesheet" href="http://static.jquery.com/ui/css/demo-docs-theme/ui.theme.css">
<div class="demo">


    <p><span class="ui-icon ui-icon-alert" style="float:left; margin:0 7px 20px 0;"></span>These items will be permanently deleted and cannot be recovered. Are you sure?</p>
</div>
</div><!-- End demo -->

CSS

#dialog-confirm{padding-top:85px;}
#dialog-confirm p{}
.ui-dialog .ui-dialog-title {font-size:0.9em;}
.ui-dialog-buttonset{}
.ui-dialog-buttonset .ui-button{}
.ui-dialog-buttonset .ui-button span{font-size:0.em;}
.moveFirstButton{float:left;position:relative;top:-220px}
.moveFirstButton span{color:#ff0000;}
.moveSecondButton{float:left;position:relative;top:-80px;left:-170px;}
.moveSecondButton span{color:#0404B4;}

JavaScript

$(function() {
        $( "#dialog-confirm" ).dialog({
            resizable: false,
            height:340,
            width:450,
            modal: true,
            buttons: {
                "I'm outside of the button pane": function() {
                    $( this ).dialog( "close" );
                },
                Cancel: function() {
                    $( this ).dialog( "close" );
                }
            }
        });
    
    $('.ui-dialog-buttonset .ui-button:first').addClass('moveFirstButton');
    $('.ui-dialog-buttonset .ui-button:last').addClass('moveSecondButton');  
});