margin-top, только когда гибкий элемент обернут

У меня есть гибкий контейнер с двумя гибкими элементами. Я хочу установить верхний край на втором, но только когда он завернут, а не на первой гибкой линии.

По возможности я хочу избегать использования медиа-запросов.

Я думал, что нижняя граница первого элемента может быть решением. Однако он добавляет пространство внизу, когда элементы не обернуты, так что та же проблема.

Это мой код:

.container {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-around;
}
.item-big {
  background: blue;
  width: 300px;
}
.item-small {
  background: red;
  margin-top: 30px;
}

<div class="container">
  <div class="item-big">
    FIRST BIG ELEM
  </div>
  <div class="item-small">
    SECOND SMALL ELEM
  </div>
</div>

Вы можете добавить некоторое количество margin-topкак к гибким элементам, так и отрицательное margin-topв таком же количестве к гибкому контейнеру.

Таким образом, отрицательная граница гибкого контейнера нейтрализует поля гибких элементов в первой строке, но не поля элементов, перенесенных на другие строки.

.container {
  margin-top: -30px;
}
.item-big, .item-small {
  margin-top: 30px;
}

.container {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-around;
  margin-top: -30px;
}
.item-big, .item-small {
  margin-top: 30px;
  background: red;
}
.item-big {
  background: blue;
  width: 300px;
}

<div class="container">
   <div class="item-big">
      FIRST BIG ELEM
   </div>
   <div class="item-small">
      SECOND SMALL ELEM
   </div>
</div>