响应式内联div中的图像改变了相邻div的位置

Question

我有一个响应div，垂直分成两个。它们被设置为水平并排显示内联，除非视口缩小到400px以下，然后它们垂直堆叠。

当两个子div仅包含文本时，一切正常 - 但左手子div中的图像会导致右手子div丢弃：http://jsfiddle.net/2o9ryj93/。

我不确定为什么。谁能帮我吗？谢谢你的时间。

CSS：

[
  {
    "id": "1123",
    "$1": [{"columnId": "1", "value": 3}]
  },
  {
    "id": "1123",
    "$1": [{"columnId": "2", "value": 2}]
  },
  {
    "id": "1124",
    "$1": [{"columnId": "1", "value": 5}]
  },
  {
    "id": "1124",
    "$1": [{"columnId": "2", "value": 6}]
  }
]

Answer 1

请参阅fiddle

添加CSS：

#left, #right{float:left;}