column-count not splitting on short columns in Chrome

Question

EDIT: I've removed the <br> tags that several people pointed out may be causing the issue and recreated the same layout with more correct CSS, which I've included below (using width:100% on the labels instead of a break), but am still getting the same bug.

I'm using column-count:2 to put some grouped lists into columns.

It's not very often I get to write this, but on IE it works as expected, all the grouped lists split into 2 columns.

On Chrome, however, it's not splitting on a very short group of just two options. Why is this?

IE version, working as expected

Chrome not splitting the first, short group into 2 columns

.aoi {
  column-count: 2;
  padding: 1em 1em 1em 2em;
}

.bfsubs_option_label {
background: url(checkbox_bg.png);
background-repeat: no-repeat;
padding: 0 0 0 1.75em;
height: 18px;
cursor: pointer;
display: inline-block;
margin-bottom: .5em;
background-position: 0 2px;
width: 100%;}

<div class="aoi types-of-communication" style="">
  <input name="option_19807" id="option_19807" type="checkbox" class="bfsubs_option" checked="" data-sub-id="19807">
  <label class="bfsubs_option_label" for="option_19807">Event Invitations</label>
  <input name="option_20000" id="option_20000" type="checkbox" class="bfsubs_option" data-sub-id="20000">
  <label class="bfsubs_option_label" for="option_20000">Insights</label><br>
</div>

Answer 1

In this case, I would simply change the HTML structure to wrap label/input inside divs:

.aoi {
  column-count: 2;
  padding: 1em 1em 1em 2em;
}

<div class="aoi types-of-communication">
  <div>
    <input name="option_19807" id="option_19807" type="checkbox" class="bfsubs_option" checked="" data-sub-id="19807">
    <label class="bfsubs_option_label" for="option_19807">Event Invitations</label>
  </div>
  <div>
    <input name="option_20000" id="option_20000" type="checkbox" class="bfsubs_option" data-sub-id="20000">
    <label class="bfsubs_option_label" for="option_20000">Insights</label>
  </div>
</div>

With more inputs:

.aoi {
  column-count: 2;
  padding: 1em 1em 1em 2em;
}

<div class="aoi types-of-communication">
  <div>
    <input name="option_19807" id="option_19807" type="checkbox" class="bfsubs_option" checked="" data-sub-id="19807">
    <label class="bfsubs_option_label" for="option_19807">Event Invitations</label>
  </div>
  <div>
    <input name="option_20000" id="option_20000" type="checkbox" class="bfsubs_option" data-sub-id="20000">
    <label class="bfsubs_option_label" for="option_20000">Insights</label>
  </div>
  <div>
    <input name="option_19807" id="option_19807" type="checkbox" class="bfsubs_option" checked="" data-sub-id="19807">
    <label class="bfsubs_option_label" for="option_19807">Event Invitations</label>
  </div>
  <div>
    <input name="option_20000" id="option_20000" type="checkbox" class="bfsubs_option" data-sub-id="20000">
    <label class="bfsubs_option_label" for="option_20000">Insights</label>
  </div>
  <div>
    <input name="option_20000" id="option_20000" type="checkbox" class="bfsubs_option" data-sub-id="20000">
    <label class="bfsubs_option_label" for="option_20000">Insights</label>
  </div>
</div>