Как правильно расположить так блоки при помощи css?

Question

[backendsha]

есть четыре поста в блоге и нужно, чтобы они выводились вот так:

Answer 1

[Ankhena]

Без доп.оберток
Через :first-child или класс
https://jsfiddle.net/x3u24qcm/

Answer 2

[Максим]

<div class="a">
  <div class="b"></div>
  <div class="c">
    <div class="d"></div>
    <div class="d"></div>
    <div class="d"></div>
  </div>
</div>

.a{
  width: 300px;
  height: 320px;
  flex-direction: column;
  display: flex;
  justify-content: space-between;
}

.b{
  width: 300px;
  height: 200px;
  background: #ccc;
}

.c{
  display: flex;
  justify-content: space-between;
}

.d{
  width: 90px;
  height: 100px;
  background: #ccc;
}

Answer 3

[Тигран Абрамян]