Stack divs vertically & keep 2 column layout - html

Question

I want to have two stacked divs on one side, and then have a single column on the other side with the same height as the left divs.
Kind of like this:
I have the two divs and a side bar, but the two divs won't stack.
Here is what I have so far Fiddle
#import url(https://fonts.googleapis.com/css?family=Oxygen);
body {
background-color: #222;
}
.description h1 {
text-align: left;
padding: 20px;
}
#wrapper {
text-align: center;
}
.description,
.sidebar,
.demo-container {
display: inline-block;
vertical-align: top;
}
.description {
background: #eee;
width: 50%;
font-family: "Oxygen";
font-size: 14px;
color: #000;
line-height: 1.2;
}
.sidebar {
background: #eee;
width: 15%;
height: 575px;
}
.demo-container {
background: #eee;
width: 50%;
font-family: "Oxygen";
font-size: 14px;
color: #000;
line-height: 1.2;
}
<div id='wrapper'>
<div class="demo-container">
<h1>Title</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam pretium lorem nec tortor elementum.</p>
</div>
<div class="description">
<h1>Title</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam pretium lorem nec tortor elementum.</p>
</div>
<div class="sidebar">
</div>
</div>

Answer 1

you are complicating a lot, here is a basic demo of what you want using flexbox
*,
*::before,
*::after {
box-sizing: border-box
}
body {
margin: 0
}
.flex {
display: flex;
flex-basis: 100%
}
.fl {
flex: 1;
display: flex;
flex-direction: column;
margin: 0 5px;
justify-content: space-between
}
.flex-item {
border: 1px solid black
}
.flex-item:not(:first-of-type) {
margin: 10px 0 0
}
.sidebar {
border: 1px solid black;
}
<div class="flex">
<div class="fl">
<div class="flex-item">
<h1>Title</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam pretium lorem nec tortor elementum, et aliquam erat feugiat. Duis interdum enim vitae justo cursus pulvinar eu ac nulla. Donec consectetur vehicula turpis. Nunc laoreet tincidunt elit</p>
</div>
<div class="flex-item">
<h1>Title</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam pretium lorem nec tortor elementum, et aliquam erat feugiat. Duis interdum enim vitae justo cursus pulvinar eu ac nulla. Donec consectetur vehicula turpis. Nunc laoreet tincidunt elit
ultrices elementum. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Curabitur augue magna, posuere id tortor vel, condimentum consectetur lacus. Pellentesque dui est, ornare vitae semper et, dapibus ut lacus.
Etiam sed porta dui. Phasellus non nisl eget dolor commodo imperdiet.</p>
</div>
</div>
<div class="fl sidebar"></div>
</div>

Answer 2

Just put <div class="sidebar"></div> before the other two divs, then float them all right. See fiddle https://jsfiddle.net/y71tkmtw/1/
.description,
.sidebar, .demo-container {
float: right;
margin: 40px;
}

Answer 3

Just add another <div> surrounding the 2 divs on the left-hand side, with float:left. Add float:right to the sidebar.
.left-container
{
width: 85%;
float:left;
}
.sidebar {
background: #eee;
width: 15%;
height: 575px;
float:right;
}
Fiddle: https://jsfiddle.net/dncgytef/2/