Cześć wszystkim! Mam problem z szerokością elementów na stronie, tzn. nie mogę dostosować szerokości diva do szerokości listy wyświetlanej wewnątrz.
Przykładowy kod przedstawiający mój problem: https://jsfiddle.net/f0b5nk6d/29/

Co chcę osiągnąć? Chcę aby:

  1. w przypadku gdy lista wewnątrz jest krótka chcę uzyskać efekt a'la tabeli z 2 wierszami i 4 kolumnami jak w załączniku 1.png - to już osiągnąłem,
  2. w przypadku gdy lista wewnątrz jest długa i wymaga wyświetlenia w kilku kolumnach chciałbym aby cały div dostosował się do jej rzeczywistej szerokości jak w załączniku 2.png.

Zależy mi aby zachować wyświetlanie zawartości całej strony w 2 wierszach. Dodam, że wyświetlane dane są pobierane z serwera więc nie wiem jaką długość będzie miała lista.

Czy znacie może jakiś sposób, aby poradzić sobie z tym wykorzystując tylko CSS? Czy jednak będzie potrzebna ingerencja JS ? Ewentualnie czy znacie może jakieś inne rozwiązanie mojego problemu? Z góry dziękuję za pomoc.