JSFiddle - React, Tailwind, and code Playground

by witq

HTML

<div class="wrapper">
    <div class="sidebar">
        <p>tekt tekst tekst tekst</p>
        <div class="tricky">
            tricky sidebar element with full width background
        </div>
    </div>
    <div class="content">
        content
    </div>
    <div style="clear:both"></div>
</div>

CSS

html, body {
    overflow-x: hidden;
}
div.wrapper {
    margin: auto;
    width: 600px;
    background: #666
}
div.sidebar {
   width: 200px;
   margin: 0 auto;
}
div.tricky {
   position: relative;
   background: pink; 
}
div.tricky:before {
   content: "";
   position: absolute;
   background: pink;  /* Match the background */
   top: 0;
   bottom: 0;
   width: 9999px;   /* some huge width */
   right: 100%; 
}
div.content {
   width: 400px
}
div.sidebar, div.content {
    float: left
}