Markup

<style>
    .container {
		background: red; /* so we notice it doesn't bleed anywhere */
        height: 500px;
		display: flex;
		flex-direction: column;
    }
	.main {
		display: flex;
		height: 250px;
		flex: 8;
	}
	.bottom-bar {
		flex: 1;
		background: #282828;
	}
	.side-bar {
		flex: 1;
		background: #121212;
	}
	.content {
		flex: 6;
		background: #181818;
	}
	.header {
		height: 200px;
		background: linear-gradient(#404040, #181818);
	}
	.neutral-txt { color: #9e9e9e; }
	.active-txt { color: #f5f5f5; }
	.highlight-txt { color: #28ce61; }
	.informational { color: #4886d4; }
</style>

<div class="container">
	<div class="main">
	    <div class="side-bar">
			<span class="neutral-txt">Neutral</span>
			<span class="active-txt">Active</span>
			<span class="highlight-txt">Highlight</span>
			<span class="informational">INFO!?</span>
		</div>
		<div class="content">
			<div class="header">
				<span class="neutral-txt">Neutral</span>
				<span class="active-txt">Active</span>
				<span class="highlight-txt">Highlight</span>
				<span class="informational">INFO!?</span>
			</div>
			<span class="neutral-txt">Neutral</span>
			<span class="active-txt">Active</span>
			<span class="highlight-txt">Highlight</span>
			<span class="informational">INFO!?</span>
		</div>
	</div>
	<div class="bottom-bar">
		<span class="neutral-txt">Neutral</span>
		<span class="active-txt">Active</span>
		<span class="highlight-txt">Highlight</span>
		<span class="informational">INFO!?</span>
	</div>
</div>

Source

• Spotify desktop client