javascript - Problems with jquery-ui droppable area -

javascript - Problems with jquery-ui droppable area -

i'm having issues droppable area in code. firing correctly , working should; however, area in can drop numbered circles not aligned correctly. hard explain here jsfiddle link below.

http://jsfiddle.net/sprink91/fse2l/48/

the html code area droppable:

<div id="card_area"> <div id="card1"> <p class="shadow 1"></p> <p class="shadow 2"></p> <p class="shadow 3"></p> </div> <div id="card2"> <p class="shadow 1"></p> <p class="shadow 2"></p> <p class="shadow 3"></p> </div>

javascript jquery html css jquery-droppable