CSS - Fill remaining width next to floated element and keep content from falling down below floated element?

Question

The problem i'm having is i need to float one element with a fixed width to the left, and have an element next to it fill the remaining width.

The only solution that i know of is to float the first element, and then the element next to it will automatically fill the remaining width. The problem i'm having is the following:

http://codepen.io/anon/pen/udBsx

If the green content is higher than the red, it will jump down below the red. Is there any way to prevent this from happening? I've played around with clear but i don't think there's anything i can do to keep it from happening.

To make it even worse, the site is responsive. If it weren't, i could just give the green element a static width and float it as well, but that is not the case. I can't use percentage because the red element has a static width.

I believe flexbox has what i'm looking for but unfortunately it's not an option right now due to lack of support.

Ideas?

Answer 1

EDIT:

The css code should look like this:

.floated {
  width:200px; float:left; 
}

.fill {
  margin-left:200px;
}