JSFiddle - React, Tailwind, and code Playground

by envira

HTML

<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.2.0/css/bootstrap.min.css">
<div class="part-a">
    <div class="container">
        <div class="row">
            <div class="col-md-12">Header</div>
        </div>
    </div>
</div>
<div class="part-b">
    <div class="background"></div>
    <div class="container">
        <div class="row">
            <div class="col-md-3">Side bar</div>
            <div class="col-md-9">Content</div>
        </div>
    </div>
</div>
<div class="part-c">
    <div class="container">
        <div class="row">
            <div class="col-md-12">Footer</div>
        </div>
    </div>
</div>

CSS

.container {
    width: 960px !important;
    position: relative;
}
.part-a {
    background: gray;
}
.part-b {
    background: red;
    overflow: hidden;
    position: relative;
}
.part-b .background {
    display: block;
    position: absolute;
    left: 0px;
    width: 50%;
    height: 100%;
    background-color: blue;
}
.part-b .container {
    background: silver;
    opacity: 0.8;
}
.part-c {
    background: gray;
}