Avoid draggables overlap in JQuery UI

Question

How can I prevent the divs from overlapping?

$("#one").draggable({ containment: 'document' });
$("#two").draggable({ containment: 'document' });

.draggable { 
    margin:0px;
    padding:20px 5px 10px 5px;
    float:left;
    cursor:grab; 
    width:60px;
    font-size:40px;
    color:white;
    background-color: #2e5888;
    opacity:0.6;
    border-radius:5px;
    text-align:center;
    border:1px solid rgb(38, 20, 102);
}

<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>

<div id="one" class="draggable">
 one
</div>
      
<div id="two" class="draggable">
 two
</div>