CSS - дисплей: таблица с дисплеем: flex as sub-child div

Question

У меня есть div с display:table;. В этом div у меня есть 2 div. 1 div имеет width:100%, div2 имеет width:320px

В div1 У меня есть несколько строк, каждая строка которых имеет 3 divs max (некоторые имеют 1 или 2). Я использую display:flex; justify-content:space-around;, чтобы красиво выровнять строки и их divs по вертикали и по горизонтали.

Проблема заключается в том, что когда я использую display:flex;, все содержимое div2 сдвигается ниже этой последней строки. Это странно, так как div1 и div2 находятся рядом друг с другом, а содержимое div1 не мешает div2.

Визуальный пример задачи:

==================================== 
=  div1   = div2 = 
==================================== 
=   +++   =   = 
=   +++   =   = 
=      =   = 
= +++ +++ +++  =   = 
= +++ +++ +++  =   = 
=      =   = 
= +++ +++ +++  =   = 
= +++ +++ +++  =   = 
=      = content = 
=      =  of = 
=      = div2 = 
=      = starts = 
=      = here = 
==================================== 

each ++ is a div inside a row 
    ++ 

Есть в любом случае я могу получить это сделать правильно? Имея div1 и div2 рядом друг с другом, в то время как содержимое div1 использует display:flex; justify-content:space-around;, а содержимое div2 начинается сверху и не сбрасывается содержимым div1.

EDIT:
Вот мой jsFiddle, чтобы показать ошибку. https://jsfiddle.net/3uss54pc/

EDIT 2:
Я попытался удалить display:flex и вместо этого использовать float:left; на .row-div и добавить clear:both; на и каждого .row, но содержание div2 все еще толкают вниз.

Я думаю, что это не проблема с display:flex;, а скорее проблема со структурой моего display:table; ??

Answer 1

Я исправил эту проблему, удалив элементы flex и вместо этого воспользуюсь display:table и display:table-cell;. Таким образом, содержимое div2 отображается в нужном месте.