JSFiddle - React, Tailwind, and code Playground

HTML

<div id="d1">parent</div>
<div id="p1">original</div>
<div id="p2">rotated</div>
<div id="p3">scaled</div>

SCSS

#d1 {
    width: 100px;
    height: 100px;
    padding: 5px;
    border: 1px solid #777;
    background-color: green;
    text-align: center;
}
#p1, #p2, #p3 {
    position: absolute;
    display: block;
    right: 0;
    bottom: 0;
    text-align: center;
    width: 90px;
    height: 40px;
    border: 1px dotted blue;
}

#p2 {
    background-color: blue;
    color: white;
    opacity: .5;
    -webkit-transform: rotate(90deg);
    -moz-transform: rotate(90deg);
}

#p3 {
    background-color: magenta;
    color: white;
    opacity: .5;
    -webkit-transform: scale(2);
    -moz-transform: scale(2);
}

CoffeeScript

$ ->
    position = ->
        $('#p1, #p2, #p3').position
            my: 'left top'
            at: 'right bottom'
            of: $('#d1')
            collision: 'fit fit'
    
    $('#d1').click position
    
    $('#d1').draggable
        drag: position
    
    position()