JSFiddle - React, Tailwind, and code Playground

by ruisoftware

HTML

<div id="outer">
    <div id="inner"></div>
<img...

CSS

#outer {
    width: 112px;
    height: 90px;
}
#inner {
    border: 1px solid rgba(255, 0, 0, .5);;
    width: 50px;
    height: 20px;
    opacity: 2;
    position: relative;
    top: 40px;
    left: 10px;
    z-index: 2;
}

JavaScript

var $i = $("#inner");
$i.css({
    'border-left-width': $i.position().left + 'px',
    'border-top-width': $i.position().top + 'px',
    'border-right-width': ($("#outer").width() - ($i.position().left + $i.width()))+ 'px',    
    'border-bottom-width': ($("#outer").height() - ($i.position().top + $i.height()))+ 'px'
});