It seems that in Microsoft's edge and google chrome the floating doesn't rearrange the divs properly, if you have three divs floated left and the page is scaled in a width between 444 and 436 px the third div goes to the second div's position instead of going below it. This "bug" does not occur in firefox.
I made a JSFiddle to be tested http://jsfiddle.net/e47jckrh/
I've edited your fiddle here: http://jsfiddle.net/e47jckrh/5/
You didn't float all your elements as you'd suggested in the question. So I added
float: left; to the div numbered 3 and set all 3 to
display: inline-block;. And using
display: table; and
display: table-cell; with
vertical-align: center; is a really old way to get something to align vertically.
These 3 lines work for most things:
position: relative; top: 50%; transform: translateY(-50%);