Browser Image Render Break Css Inline-block Layout

I have 2 div with 50% width and inline-block, on this div have a image. I'm expected 2 div will stay in one line, but sometime, browser break the layout. Here is html :

Solution 1:

My god, i solved this problem, just move div.versus-wraper to the last of span.field-content, everything become good.

But still don't know why it make a problem, still a mysterious with me. There are something to learn, if someone know, please answer.

Share