Javascript: detecting if two div's are too close or collide/overlap

Javascript: detecting if two div's are too close or collide/overlap

I'm trying to detect if two given DIV's are too close or collide/overlap .
I have the below codepen which tries to generate 20 random DIV's and only
append them to body if their position isn't too close to other existing
DIVs. That's the idea but it doesn't work as expected where i get DIV's
that get through with close/overlapping positions to existing DIVs. (run
it multiple times if first time is perfect and you should come across it).
http://codepen.io/anon/pen/yqJHp
Can anyone see the mistake and way to make it work?
Thanks