Есть ли способ разделить только несколько тегов <div>на два столбца по вертикали?

Question

Есть ли способ разбить только отдельные div на две колонки?и в способах, которые div выровнены вертикально.

Мой css-файл выглядит следующим образом

#views-form
 {
  -webkit-columns: 2;
  -moz-columns: 2;
  columns: 2;
  padding-left: 0;
}

#views-form .item-list {
  list-style-position: inside;
  -webkit-column-break-inside: avoid;
  page-break-inside: avoid;
  break-inside: avoid;
}

Но это приводит к разбиению всех элементов div внутри формы на два столбца.

<form id="views-form">
   <div></div>
   <div class="item-list"></div>
   <div class="item-list"></div>
   <div class="item-list"></div>
   <div class="item-list"></div>
   <div class="item-list"></div>
    ....
   <div></div>
</form>

Мне нужно разделить теги div с классом "item-list" на два столбца.К сожалению, я не могу обернуть div "list-list" в какой-то другой тег.Я ожидаю, что погружения будут выровнены по вертикали.Чтобы это выглядело следующим образом:

<form>
 <div></div>
 <div class="item list"> 1 </div> | <div class="item list"> 4 </div>
 <div class="item list"> 2 </div> | <div class="item list"> 5 </div>
 <div class="item list"> 3 </div> | <div class="item list"> 6 </div>
 <div> </div> 
</form>

Answer 1

Чтобы выровнять эти пары на той же высоте, как вы указали в комментариях, вы можете применить display: flex к контейнеру и определить width изгибаемых элементов как 50%, при этом для параметра по умолчанию установлено значение 100% для этих DIV в целом, так что другие DIV заполняют всю ширину контейнера:

#views-form {
  display: flex;
  flex-wrap: wrap;
}

#views-form>div {
  width: 100%;
  box-sizing: border-box;
  border: 1px solid green;
}

#views-form .item-list {
  width: 50%;
}

<form id="views-form">
  <div>something</div>
  <div class="item-list"> some text some more text some more text some more text some more text some more text  </div>
  <div class="item-list">  some more text some more text some more text some more text some more text some more text some more text some more text some more text some more text some more text </div>
  <div class="item-list">  some more text some more text some more text some more text some more text some more text some more text some more text </div>
  <div class="item-list">  some more text some more text some more text some more text some more text </div>
  <div class="item-list">  some more text some more text some more text some more text some more text some more text some more text some more text some more text some more text some more text some more text some more text some more text </div>
  <div class="item-list">  some more text some more text some more text some more text some more text some more text </div>
  <div>something else </div>
</form>