JSFiddle - React, Tailwind, and code Playground

HTML

<div id="bigbox">
    <div id="container">
        <div id="smallbox"></div>
    </div>
</div>

<pre></pre>

CSS

body{margin:0;padding:0;margin-top:50px;}

#bigbox{
    width:200px;
    height:200px;
    border:1px solid red;
    margin:0 auto;
}

#smallbox{
    width:100px;
    height:100px;
    border:1px solid blue;
    margin:50px auto;
}

pre{
    position:absolute;
    left:10px;
    bottom:10px;
}

JavaScript

$('pre').append('$("#bigbox").offset().left: '+$("#bigbox").offset().left+"\n");
$('pre').append('$("#smallbox").offset().left: '+$("#smallbox").offset().left+"\n");
$('pre').append('$("#smallbox").position().left: '+$("#smallbox").position().left+"\n");



// How can I get the offset of #smallbox from #bigbox, regardless of how many children #bigbox has that result in #smallbox?


// 25px should be the return