Как сделать правильно списки

Question

Всем привет.

Нужно сделать два дива .list с двумя колонками списка и что-бы они делили пространство между собой, но возникает одна проблема, когда в первом диве .list текста мало во втором списке, то текст улетает далеко, а надо чтобы отступ у неё был как у колонок во втором диве .list.

Там из-за текста больше и поэтому список ближе становится относительно первого списка.

Можно ли как-то сделать это?

Хочу сохранить адаптивность не задавая абсолютные величины.

ul li {list-style: none;}

.list {
  max-width: 600px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

<div class="list">
<ul>
  <li>Lorem ipsum dolor .<li>
  <li>Lorem ipsum dolor<li>
  <li>Lorem ipsum dolor.<li>
</ul>
<ul>
  <li>Lorem .<li>
  <li>Lorem ipsum<li>
  <li>Lorem.<li>
</ul>
</div>


<div class="list">
<ul>
  <li>Lorem ipsum dolor sit amet.<li>
  <li>Lorem ipsum dolor sit amet.<li>
  <li>Lorem ipsum dolor sit amet.<li>
</ul>
<ul>
  <li>Lorem .<li>
  <li>Lorem ipsum<li>
  <li>Lorem ipsum dolor sit amet amet amet<li>
</ul>
</div>

Answer 1

Задать размер для тэга

 ul li {
  list-style: none;
 }

 ul {
  width: 300px;
 }

.list {
  max-width: 600px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

<div class="list">
<ul>
  <li>Lorem ipsum dolor .<li>
  <li>Lorem ipsum dolor<li>
  <li>Lorem ipsum dolor.<li>
</ul>
<ul>
  <li>Lorem .<li>
  <li>Lorem ipsum<li>
  <li>Lorem.<li>
</ul>
</div>


<div class="list">
<ul>
  <li>Lorem ipsum dolor sit amet.<li>
  <li>Lorem ipsum dolor sit amet.<li>
  <li>Lorem ipsum dolor sit amet.<li>
</ul>
<ul>
  <li>Lorem .<li>
  <li>Lorem ipsum<li>
  <li>Lorem ipsum dolor sit amet amet amet<li>
</ul>
</div>

БЛОГ НА HUSL

Как сделать правильно списки

Ответы (1 шт):