Выровнять столбцы в начальной загрузке

Question

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

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

Мой текущий код здесь:

[3]:https://jsfiddle.net/evr86bjn/2/

Кто-нибудь может мне помочь?

Answer 1

Вы дали align-items: center для Holder div.Попробуйте добавить align-items: flex-start.надеюсь, что это решит проблему.

.Holder {
display: flex;
align-items: flex-start;
justify-content: center;
}

Answer 2

Вы можете использовать bootstrap по своему усмотрению, если хотите ... Я сократил ваш html-код до 2 ul, используя bootstrap довольно просто, что-то вроде

<div class="row">
  <div class="col-sm-6">             
    <ul id="listWrap" class="price-table__info"> 
      <li>
        <p class="ocjenaNaslov">Lorem Lorem 1</p>
      </li>
      <li>
        <p class="rok1">Lorem lorem 1</p>
        <p>Lorem lorem</p>
      </li>
      <li>
        <p class="rok1">Lorem lorem</p>
        <p>Lorem lorem</p>
      </li>
      <li>
        <p class="rok1">Lorem lorem</p>
        <p>Lorem lorem</p>
      </li>
      <li>
        <p class="rok1">Lorem lorem</p>
        <p>2</p>
      </li>
    </ul>
  </div>
  <div class="col-sm-6">
    <ul id="listWrap" class="price-table__info">
      <li>
        <p class="ocjenaNaslov">Lorem Lorem 2</p>
      </li>
      <li>
        <p class="rok1">Lorem lorem</p>
        <p>Lorem lorem</p>
      </li>
      <li>
        <p class="rok1">Lorem lorem</p>
        <p>Lorem lorem</p>
      </li>
      <li>
        <p class="rok1">Lorem lorem</p>
        <p>Lorem lorem</p>
      </li>
      <li>
        <p class="rok1">Lorem lorem</p>
        <p>Lorem lorem</p>
      </li>
      <li>
        <p class="rok1">Lorem lorem</p>
        <button type="submit" class="btn btn-primary waves-effect isp"><i class="far fa-calendar-alt"></i>Info</button>
      </li>
    </ul>
  </div>
</div>

Answer 3

удалить align-items: center; из .holder.так как 1st ul имеет меньше содержимого, он выравнивается по центру.

https://jsfiddle.net/evr86bjn/2/

    .Holder {
    display: flex;
    /* align-items: center; */
    justify-content: center;
}