JSFiddle - React, Tailwind, and code Playground

HTML

<div id="d1" style="position:relative">
    
    <div id="d2" style="position:absolute">
        
        <div id="d3" style="position:relative"></div>
        
    </div>
    
</div>

CSS

#d1 {
    background: #cc3333;
    width: 100%;
    height: 100px;
}
#d2 {
    background: #1706ab;
    width: 50%;
    height: 50px;
    top: 0; /* positions at top of parent div */
}

#d3 {
    background: #cccc33;
    width: 25%;
    height: 25px;
    right: -100%; /* positions relative to its parent */
}