css - 列数が要素の境界を壊さないようにする

Question

column-count と -webkit-column-count を使用してレイアウトを作成していますが、複数回発生する問題が見つかりました。

この画像からわかるように、Chrome 45 (FF では発生していません) は要素の境界を壊します。これは非常に奇妙で、非常に厄介です。これはブレークが発生するコードの一部です (ただし、ここで発生しない理由はわかりません。違いはフォントと Mayers css reset がないことだけです):

body {
  line-height: 1.5;
}
form {
  -webkit-column-count: 2;
  column-count: 2;
}
label {
  display: block;
  -webkit-column-break-inside: avoid;
  page-break-inside: avoid;
  break-inside: avoid;
  margin-top: 0.625em;
}
input {
  border: 1px solid green;
  border-radius: 4px;
  padding: 0.25em 0.5em;
}
label>span:first-child {
  width: 5em;
  display: inline-block;
}

<h2>CONFIG:</h2>
<form id="pop_values" action="" class="ng-pristine ng-valid">
  <label>
    <input type="checkbox">
    <span>Mobile</span>
  </label>
  <label>
    <input type="checkbox">
    <span>Animate</span>
  </label>
  <label>
    <span>Frecuency:</span>
    <input type="number">
  </label>
  <label>
    <span>Exclusions:</span>
    <input type="text">
  </label>
</form>

しかし、うまくいきませんでした。何か啓蒙していただけませんか？