column-countで要素がずれる

背景

ulで複数の要素を2列に表示しようとしたところ、
1列目にあるli内のdiv.list__noteの文章が多い時、2列目の先頭に押し出されてしまい、困った困ったになっていました。

<ul clas="list">
  <li v-for="(item, index) in list" :key="index" class="list__item">
    <div class="list__left">{{ item.label }}</div>
    <div class="list__right">
      <div class="list__text">{{ item.text }}</div>
      <div class="list__note">{{ item.note }}</div>
    </div>
  </li>
</ul>

解決方法

いい感じの記事があったので、参考にしてみました。

cssに以下を追加したら、直りました。

.list {
  -webkit-column-count: 2;
  -moz-column-count: 2;
  column-count: 2;
  &__item {
    display: inline-flex;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
  }
}