Dynamically resize columns based on how many there are in a row

I'm trying to make a responsive column layout that resizes depending on the number of columns.

Link to JsFiddle

<div class="row">
<div class="box half">1/2</div>
<div class="box quarter">1/4</div>
<div class="box quarter">1/4</div>
</div>

<div class="row">
<div class="box half">1/2</div>
<div class="box quarter hidden">1/4</div>
<div class="box quarter">1/4</div>
</div>

So, what I'm trying to do is if I add the class "hidden" to one of the boxes, the other boxes will resize and fill up the row. For example, in the first row we have one column 50% and two columns 25%; If I hide one 25% column, the first column will have 66% and the 2nd one will have 33%.

I have to do this without adding any other classes to html and work in IE8+.

via Chebli Mohamed