Список с заголовками для сгруппированных разделов

Question

Я пытаюсь отобразить список событий, сгруппированных по дате:

May 1
    Event 1
    Event 2
May 2
    Event 1
    Event 2

Я все еще хочу иметь возможность нацеливать группы событий, используя селектор CSS. Например:

May 1
    |=======|
    |Event 1|
    |Event 2|
    |=======|
May 2
    |=======|
    |Event 1|
    |Event 2|
    |=======|

Какие HTML-теги будут правильным способом структурировать это?

---

Я хотел бы использовать список описаний, но, похоже, сложно нацелить группы событий с помощью селектора CSS. Я не вижу отличного способа нарисовать коробку с событиями 1 мая:

<dl>
    <dt>May 1</dt>
    <dd>Event 1</dd>
    <dd>Event 2</dd>
    <dt>May 2</dt>
    <dd>Event 1</dd>
    <dd>Event 2</dd>
</dl>

Использование div'ов кажется отличной альтернативой, но мне кажется, что я теряю некоторую структуру:

<div>
    <div>May 1</div>
    <div>
        <div>Event 1</div>
        <div>Event 2</div>
    </div>
    <div>May 2</div>
    <div>
        <div>Event 1</div>
        <div>Event 2</div>
    </div>
</div>

Answer 1

Разве это не идеальное время для использования ul/li структуры?

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

 ::before,
 ::after {
  box-sizing: inherit;
}

ul {
  list-style: none;
}

.dates {
  display: inline-block;
}

.date ul {
  border: 1px solid red;
  margin-left: 1em;
}

<ul class="dates">
  <li class="date">Date 1
    <ul>
      <li>Event</li>
      <li>Event</li>
      <li>Event</li>
    </ul>
  </li>
  <li class="date">Date 2
    <ul>
      <li>Event</li>
      <li>Event</li>
      <li>Event</li>
    </ul>
  </li>
</ul>