Please resolve this problem coming either due to html or due to jquery?

Please resolve this problem coming either due to html or due to jquery?

Hi

<html xmlns="http://www.w3.org/1999/xhtml">
<title>Simple jquery drag and drop div example</title>

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.0/jquery.min.js" type="text/javascript"></script>
<script src="http://code.jquery.com/ui/1.8.23/jquery-ui.min.js" type="text/javascript"></script>
<style>
.aParent {float: left; clear: none; }
#leftSlot, #rightSlot { list-style-type: none; margin: 0; padding: 0 0 2.5em 10em; float: left; margin-right: 10px; }
#leftSlot li, #rightSlot li { margin: 0 5px 5px 5px; padding: 5px; font-size: 1.2em; width: 120px; }
#leftSlot li {border: 1px solid #AAAAAA;background-color: #b0c4de;}
#rightSlot li {border: 1px solid #AAAAAA;background-color: #e0ffff;}
</style>
<script>
$(document).ready(function(){
for(i=1; i<=5; i++) {
$("<li>" + i + "</li>").data('number',i).appendTo("#leftSlot").draggable( {
      containment: '#content',
      cursor: 'move',
      revert: true
});
}

for(i=6; i<=10; i++) {
$("<li>" + i + "</li>").data('number',i).appendTo("#rightSlot").draggable( {
      containment: '#content',
      cursor: 'move',
      revert: true
});
}
});
</script>
<body>
<div class="aParent">
<ul id = "leftSlot" class = "one"/>
<ul id = "rightSlot" class = "two"/>
</div>
</body>
</html>


Output : 


Why "1" row is coming that way ?
I want to "1" row in first li come in a normal way like others

Please suggest the solution .Is there any problem with HTML or jquery?


Waiting