I am trying to create a layout with two stacked `div`s on one side, and then have a single column on the other side that is the same height as the left `div`s.
Something similar to this:
https://i.stack.imgur.com/ODsEd.png
I currently have the two `div`s and a sidebar, but I'm having trouble getting the two `div`s to stack properly.
Here is my current progress on 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>