JSFiddle - React, Tailwind, and code Playground

by Rykus0

HTML

<div id="container">
    
    <div id="green-box">
        <div id="green-box-content">
            <p>Here is some text!</p>
            <div id="red-box"></div>
        </div> 
    </div>
    
    <div id="blue-box">
        
    </div>
    
    <div style="clear: both"></div>
</div>

CSS

#blue-box,
#green-box {
    height: 300px;
}

#green-box { 
    position: relative; 
    width: 75%; 
    float: left; 
    
    background: green; 
}
#blue-box { 
    width: 25%; 
    float: left;
    
    background: blue; 
}
#red-box {
    position: absolute;
    top: 50px;
    right: -178px; /* width / 2 */
    
    width: 357px;
    height: 207px;
    
    background: red;
}