Менеджер событий для Wordpress двух столбцов с проблемой flex

Question

Я работаю на сайте WordPress, где клиент хочет, чтобы его события отображались в повседневном формате с помощью плагина диспетчера событий для WordPress, и чтобы события располагались в столбцах по два (вот как это выглядит сейчас: https://ibb.co/cwfg6V).

Я попытался сделать все это с помощью flex, но проблема возникает, когда и дата, и два столбца событий, которые у меня есть, помещаются в #em-wrapper (по умолчанию), и я не хочу, чтобы дата была согнута столбцы событие / событие вообще (потому что тогда они находятся в той же строке, что и изображение, показанное в ссылке.) Я не могу изменить способ размещения даты в родительском div, потому что она обрабатывается плагином Event Manager Единственное, что я могу сделать, это создать классы для всего.

Изображение формата HTML, которое я могу сделать для отдельных событий

Простой пример того, как это делается.

#em-wrapper {
    display: flex;
    flex-wrap: wrap;
}

.event_container {
   display: flex;
   flex: 1;
   flex-wrap: wrap;
   max-width: 300px;
   padding: 0 5px 30px 5px;
}

<div id="em-wrapper">
  <h1 class="event_date">1.1.2018</h1>
  <div class="event_container">An event</div>
  
  <h1 class="event_date">2.1.2018</h1>
  <div class="event_container">Another event</div>
</div>

Я надеюсь, что вы, ребята, можете понять, что я имею в виду, спасибо!

Answer 1

Я понял это с помощью flexbox.

#em-wrapper получает: display: flex; flex-flow: row wrap;

... и .event_date получает: flex: 1 0 100%;

... и .event_containe получает: flex: 1 1 50%;