Позиционирование контейнера перед <ul>, чтобы иметь такую ​​же высоту, как первый <li>элемент списка

Question

У меня есть эта структура

<div>item 0</div>
<ul>
    <li>item 1 <br> some <br> text</li>
    <li>item 2 <br> text </li>
    <li>item 3</li>
</ul>

Мне нужно расположить <div> и <li> -s рядом друг с другом (ширина: 50%), что легко. Но div должен быть такой же высоты, как первый из <li>. Высота <li> неизвестна

Я ищу форму css only solution. JS не допускается. Flexbox приветствуется, некоторые дополнительные html-разметки, но ul должен остаться ul.

Answer 1

Вы можете сделать это с помощью CSS-Grid и подсеточной системы , используя display:contents. Эта функция еще не поддерживается всеми браузерами, но скоро появится:

Ниже код проверен на Chrome и Firefox

.container {
  display: grid;
  grid-template-columns:1fr 1fr;
}

.container > div{
 box-sizing:border-box;
 border:1px solid;
}

ul {
 display:contents;
 margin:0;
 padding:0;
}
ul li {
  display:contents;
}
/*Create a hidden element to fill the first column and keep the content of li in the second one*/
ul li:after {
  content:"";
}

<div class="container">
  <div>item 0</div>
  <ul>
    <li>item 1 Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean vitae isus in velit tristique bibendum. Ut porta diam ac eros finibus, ac rhoncus nulla congue. <br> some <br> text</li>
    <li>item 2 <br> text </li>
    <li>item 3</li>
    <li>item 4 <br> text </li>
    <li>item 5</li>
    <li>item 6 <br> text </li>
    <li>item 8</li>
  </ul>
</div>