JSFiddle - React, Tailwind, and code Playground

HTML

<link rel="stylesheet" href="http://getbootstrap.com/dist/css/bootstrap.min.css">
<div class="container">
    <div class="col-xs-9">
        <h1>Titel</h1>
        
        <div class="content">
            <p>Content</p>
            
            <div class="break-out">
                <p>Joehoe</p>
            </div>
            
            <p>Meer content.</p>
        </div>
    </div> 
    <div class="col-xs-3">
        <p>Sidebar met korte paragraaf en andere meuk. Voor demo-purposes nog wat lorem ipsum dolor sit amet,  consectetur adipiscing elit. Sed eu massa lacus. Interdum et malesuada fames ac ante ipsum primis in faucibus!</p>
    </div>
</div>

CSS

.col-xs-9 {
    background: red;
    z-index: 10;
}

.col-xs-3 {
    background: blue;
}

.break-out {
    background: green;
    margin-right: calc((100% + 30px) / -3); /* == calc(-1 * ((100% + 30px) / 3)); */
}