JSFiddle - React, Tailwind, and code Playground

HTML

<link rel="stylesheet" href="http://code.jquery.com/ui/1.9.1/themes/base/jquery-ui.css">
<script src="http://code.jquery.com/ui/1.9.1/jquery-ui.js"></script>
<div style="background: #CCC; height:80px; text-align:center; padding-top:20px;">Header</div>

<div class="col"><button>Open Dialog</button></div>
<div class="col"><button>Open Dialog</button></div>
<div class="col"><button>Open Dialog</button></div>

CSS

.col{ height: 500px; width: 30%; margin-right:2%; float: left; border: 1px solid #CCC}
.col button { margin:20px auto;}

JavaScript

var dialogOffset = {
    top: 50,
    left: 10
}
    
   

$('button').click(function() {
    var $parent = $(this).closest('div.col');
    var parentPos = $parent.offset()
/* create position array for new dialog*/
    var dialogPosition = [parentPos.left + dialogOffset.left, parentPos.top + dialogOffset.top];

    var parentIndex = $('.col').index($parent)

    $('<div>').dialog({      
         position:  dialogPosition,
        width: 150,
        
        title: 'Column '+(parentIndex+1) ,
        close: function() {
            $(this).remove()
        }

    })



})