JSFiddle - React, Tailwind, and code Playground

by jimconte

HTML

<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.10.3/jquery-ui.min.js"></script>
<link rel="stylesheet" href="http://http://ajax.googleapis.com/ajax/libs/jqueryui/1.10.3/themes/smoothness/jquery-ui.css">
<div class="module-1">
    module 1
    <div class="position-block">position block</div>
</div>
<div class="module-2">module 2</div>
<div style="clear:both"></div>
<button id="position">Position</button>

CSS

.module-1 {
    display: block;
    width:300px;
    height:150px;
    border: 1px solid #000;
}
.module-2 {
    display: block;
    width:150px;
    height:100px;
    border: 1px solid #000;
    background-color: #ccc;
}
.position-block {
    width:140px;
    display: block;
    position: relative;
    float: right;
    border: 1px solid #000;
    background-color: #ffffcc;
    margin: 10px;
}
body, div {
    font: 12px arial, sans-serif;
}
}

JavaScript

$(function() {
    
    $("#position").click(function() {
        var targetRight = $(".position-block").offset().left + $(".position-block").width();
        var targetTop = $(".position-block").offset().top;
        
        $(".module-2").css("position", "absolute");
        $(".module-2").css("left", (targetRight - $(".module-2").width()) + "px");
        $(".module-2").css("top", targetTop + "px");
        
    });
    
});