Изображение в ответном inline div меняет положение соседнего div

Question

У меня есть отзывчивый div, разделенный на две вертикальные. Они установлены для отображения строки, бок о бок по горизонтали, если только окно просмотра не сжимается ниже 400 пикселей, а затем складывается вертикально.

Все работает нормально, когда два дочерних div содержат только текст, но изображение в левом дочернем div приведет к потере права дочернего div: http://jsfiddle.net/2o9ryj93/.

Я не уверен, почему. Может кто-нибудь мне помочь? Спасибо за ваше время.

CSS:

.wrapper { 
    width: 100%; 
    display: inline-block; 
    position: relative; 
} 
.wrapper:after { 
    padding-top: 70%; 
    display: block; 
    content: ''; 
} 
.main { 
    position: absolute; 
    top: 0; 
    bottom: 0; 
    right: 0; 
    left: 0; 
    font-size: 0; 
} 
#left, 
#right { 
    font-family: serif; 
    line-height: 150%; 
    font-size: 2.2vw; 
    display: inline-flex; 
    width: 40%; 
    height: 90%; 
    background-color: #edeeeb; 
    padding: 5%; 
} 

Answer 1

См fiddle

Добавить CSS:

#left, #right{float:left;}