Divs nebeneinander und untereinnader positionieren

[MarkusEbeling]

Hallo!

Ich habe drei DIVs die ich aneinander positionieren möchte.[Bild1]

<div style='width: 158px; height: 158px; border: 1px solid #FFF; background: #0080C0; clear: both; float: left'>
</div>
     
<div style='width: 78px; height: 78px; border: 1px solid #FFF; background: #0080C0; float: left'>
</div>

<div style='width: 158px; height: 78px; border: 1px solid #FFF; background: #0080C0; float: left'>
</div>

Jetz möchte ich aber das der dritte DIV neben dem ersten und unter dem zweiten liegt [Bild2]

Was muss ich ergenzen damit das so passt.
Ich habe es bisher durch clear und float nur geschafft das der dritte DIV unter dem ersten liegt. Ich möchte keinen weiteren DIV einfügen in den ich DIV2 und 3 reintue.

Viellecht hat einer von Euch eine Idee

 

[Sempervivum]

Das geht relativ einfach mit column-count:
https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Columns/Using_multi-column_layouts

Oder mit Flex-Layout:
https://jsfiddle.net/Sempervivum/zbyLo5sc/1/