Is it possible to float: right; align to top?

Question

Here is my jsfiddle.

I have a container using the "clearfix" class. Within that are 3 articles, the first two are floated left at 70% width, the last is floated right at 30% width.

My expectation would be that the floated right article would fill in the open space and be aligned to the top right... but it is instead aligned alongside the last floated left article.

Is there any way to force this floated right article to align to the top, without resorting to positioning?

Thanks!

EDIT: I should elaborate that sadly I have little control over the markup in this situation... I cannot wrap the first two articles in its own container. Also, the height of each of these articles is unpredictable. If I positioned the right aligned article absolutely, and it was longer in height than the combined left aligned articles... then I would have a article element overflowing onto the footer.

.left {
    float: left;
    width: 70%;
    height: 240px;
}
.right {
    float: right;
    width: 30%;
    height: 340px;
}
.clearfix:before,
.clearfix:after,
.checkboxset:before,
.checkboxset:after {
    content: " ";
    display: table;
}
.clearfix:after,
.checkboxset:after {
    clear: both;
}

Answer 1

The thing about float is it removes the floated element from the DOM, so it doesn't know where the other elements are anymore to align itself. You need to wrap it in an unfloated div and then align that. The wrapping element needs to be "overflow: hidden" as well so it'll contain the entire floated element.