Как добиться гибкой высоты элемента / столбца вертикального списка в CSS?

Я создаю веб-приложение, которое использует меню боковой панели для всех его опций. Боковая панель одинакова для каждой страницы, но содержит разные элементы в зависимости от посещаемой страницы.

Мы получили отзывы о том, что размер (высота) этих предметов на веб-сайте не одинаков. Это правильно, потому что на некоторых страницах есть пункты меню, состоящие из двух или даже трех строк. Хотя чаще всего используется однострочный.

Мне поручили следующую проблему:

• Создайте чистое решение CSS, которое требует стилизации одного компонента (c-menu-item) и его элемента-контейнера (b-sidebar), который автоматически определяет высоту всех пунктов меню в зависимости от размера самого большого пункта меню.

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

Обязательный минимальный пользовательский код:

.b-sidebar {
  display: flex;
  flex-flow: column nowrap;
  justify-content: center;
  background: #ff0;
  width: 200px;
  padding: 10px;
}

.c-menu-item {
  display: flex;
  flex-flow: row nowrap;
  align-content: center;
  width: 100px;
  background: #0ff;
  margin: 5px;
}

<div class = "b-sidebar">
  <div class = "c-menu-item">Hello world!</div>
  <div class = "c-menu-item">Hello world!</div>
  <div class = "c-menu-item">Hello world!</div>
  <div class = "c-menu-item">Hello world!</div>
  <div class = "c-menu-item">Hello world! I have two lines</div>
</div>
<p>I would like for <b>all</b> menu items to take the height of the last element, in a responsive matter because the menu items en size differs per page of the web application</p>

(Примечание: я знаю, что могу решить эту проблему с помощью JavaScript, если потребуется. Я просто предпочитаю чистое решение CSS, если это невозможно, то это тоже подойдет мне).