L oop список, выравнивая элементы влево или вправо в зависимости от их четности

Question

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

<div class="container">
   while(!lista.isEmpty()){
     <div class="c-box if(posicion%2 == 0){'c-right'}else{'c-left'}">{{item}}</div>
   }
</div>

Проблема заключается в том, что в обоих столбцах не всегда одинаковые элементы, и элементы могут иметь переменной высоты, поэтому наиболее очевидным решением будет:

.container{
}
.c-box{
    width:50%;
    display:inline-block;
}
.c-left{
    float:left;
}
.c-right{
    float:right;
}

<div class="container">
  <div class="c-box c-left">1-Left</div>
  <div class="c-box c-right">2-Right</div>
  <div class="c-box c-left">3-Left</div>
  <div class="c-box c-right">4-Right</div>
  <div class="c-box c-right">5-Right</div>
  <div class="c-box c-left">6-Left</div>
  <div class="c-box c-left">7-Left</div>
  <div class="c-box c-left">8-Left</div>
  <div class="c-box c-left">9-Left</div>
  <div class="c-box c-left">10-Left</div>
  <div class="c-box c-left">11-Left</div>
  <div class="c-box c-left">12-Left</div>
  <div class="c-box c-left">13-Left</div>
  <div class="c-box c-left">14-Left</div>
  <div class="c-box c-right">15-Right</div>
</div>

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

Другое решение, которое я попытался назначить боковое поле для принудительного расположения влево и вправо, но в этом случае слева или справа от каждого поля есть пробел:

.container{
    }
.c-box{
    width:50%;
    display:inline-block;
}
.c-left{
    float:left;
    margin-right:50%;
}
.c-right{
    float:right;
    margin-left:50%;
}

<div class="container">
  <div class="c-box c-left">1-Left</div>
  <div class="c-box c-right">2-Right</div>
  <div class="c-box c-left">3-Left</div>
  <div class="c-box c-right">4-Right</div>
  <div class="c-box c-right">5-Right</div>
  <div class="c-box c-left">6-Left</div>
  <div class="c-box c-left">7-Left</div>
  <div class="c-box c-left">8-Left</div>
  <div class="c-box c-left">9-Left</div>
  <div class="c-box c-left">10-Left</div>
  <div class="c-box c-left">11-Left</div>
  <div class="c-box c-left">12-Left</div>
  <div class="c-box c-left">13-Left</div>
  <div class="c-box c-left">14-Left</div>
  <div class="c-box c-right">15-Right</div>
</div>

Другим возможным решением может быть использование сетки, но это делает боковой столбец всегда одинаковой высоты, и это нежелательно, поскольку некоторые элементы отображают другие элементы в одинаковых c -box динамически.

.container {
  display: grid;
  width: 100%;
  grid-gap: 10px 10px;
  grid-template-columns: 45% 45%;
  grid-auto-flow: column;
}

.c-box {
  width: 100%;
  border: 2px solid red;
}

.c-left {
  grid-column-start: 1
}

.c-right {
 grid-column-start: 2;
}

<div class="container">
  <div class="c-box c-left">1-Left</div>
  <div class="c-box c-right">2-Right</div>
  <div class="c-box c-left" style="height:80px">3-Left</div>
  <div class="c-box c-right">4-Right</div>
  <div class="c-box c-right">5-Right</div>
  <div class="c-box c-left">6-Left</div>
  <div class="c-box c-left">7-Left</div>
  <div class="c-box c-left">8-Left</div>
  <div class="c-box c-left">9-Left</div>
  <div class="c-box c-left">10-Left</div>
  <div class="c-box c-left">11-Left</div>
  <div class="c-box c-left">12-Left</div>
  <div class="c-box c-left">13-Left</div>
  <div class="c-box c-left">14-Left</div>
  <div class="c-box c-right">15-Right</div>
</div>

Я знаю, что если использовать 2 деления с двумя столбцами и дважды просмотреть список, эта проблема будет решена, но я не могу применить это решение в этом случае, список необходимо просмотреть, как показано в первом коде, у меня есть возможность использовать flex-box или любое решение CSS, но я предпринял много попыток без каких-либо результатов. Вероятно, это простая проблема, но я не могу найти решение.

Заранее спасибо, надеюсь, вы мне поможете.