3 Column puzzle

The goal is for column 1 & 3 with variable height to be aligned next to each other and Column 2 at the bottom.

by Danny_Joris

HTML

<div class="wrapper">
    <div class="column-1">Events</div>
    <div class="column-2">Social</div>
    <div class="column-3">News</div>
</div>
<div class="wrapper wrapper-2">
    <div class="column-1">Events</div>
    <div class="column-2">Social</div>
    <div class="column-3">News</div>
</div>
<div class="wrapper wrapper-3">
    <div class="column-1">Events</div>
    <div class="column-2">Social</div>
    <div class="column-3"><strong>News</strong><span>Item 1</span><span>Item 2</span><span>Item 3</span><span>Item 4</span><span>Item 5</span></div>
</div>
<br><br><br>
<h3>Goal:</h3>
<img src="http://f.cl.ly/items/3o2J0B1E2f422M030t3G/Screenshot_2013-05-15_11_23_PM.png">

CSS

.wrapper {
    position: relative;
    width: 100%;
    display: inline-block;
    margin: 10px 0;
}

.wrapper div {
    float: left;
    margin-right: 3.89232%;
    width: 48.0538%;
}

.wrapper div.column-1 {
    background-color: lightblue;
}

.wrapper div.column-2 {
    float: right;
    margin-right: 0;
    width: 100%;
    background-color: lightgreen;
}

.wrapper div.column-3 {
    float: right;
    margin-right: 0;
    background-color: orange;
}

.wrapper-2 div.column-2 {
    display: none;
}

.wrapper-3 div.column-1 {
    
}
.wrapper-3 div.column-2 {
    float: right;
    margin-right: 0;
    width: 48.0538%;
}
.wrapper-3 div.column-3 {
    width: 100%;
}

.wrapper-3 div.column-3 strong {
    width: 100%;
    float: left;
}

.wrapper-3 div.column-3 span {
    width: 45%;
    float: left;
}

.wrapper-3 div.column-3 span:nth-child(2n+1) {
    float: right;
}

img {
    width: 100%;
}