Display: inline-block + float + resize. How it works?

Question

css

Hello.
Actually to the point:
https://jsfiddle.net/gegfw516/2/
Where does the empty space from the parent (from the side) come from, when, when the browser window is resized, the float element jumps down (element with the .i class)? Indeed, in essence, the parent should fit snugly against the children. and not stretch to full width, as far as I know.