JSFiddle - React, Tailwind, and code Playground

by merganser

HTML

<p>Here are a bunch of check boxes and their labels laid out nicely
  <p><b>Note:</b> Internet Explorer 9, and earlier versions, does not support the column-count property.</p>

  <div class="newspaper">

    <span style="white-space: nowrap;"><input type="checkbox" name="data" value="some value" id="some id1" /><label for="pizza stuff">something for your pizza</label></span><br />
    <span style="white-space: nowrap;"><input type="checkbox" name="data" value="some value" id="some id2" /><label for="pizza stuff">something for your pizza</label></span><br />
    <span style="white-space: nowrap;"><input type="checkbox" name="data" value="some value" id="some id3" /><label for="pizza stuff">something for your pizza</label></span><br />
    <span style="white-space: nowrap;"><input type="checkbox" name="data" value="some value" id="some id4" /><label for="pizza stuff">something for your pizza</label></span><br />
    <span style="white-space: nowrap;"><input type="checkbox" name="data" value="some value" id="some id5" /><label for="pizza stuff">something for your pizza</label></span><br />
    <span style="white-space: nowrap;"><input type="checkbox" name="data" value="some value" id="some id6" /><label for="pizza stuff">something for your pizza</label></span><br />
    <span style="white-space: nowrap;"><input type="checkbox" name="data" value="some value" id="some id" /><label for="pizza stuff">something for your pizza</label></span><br />
    
  </div>
  
  </p>

CSS

.newspaper {
    -webkit-column-count: 6; /* Chrome, Safari, Opera */
    -moz-column-count: 6; /* Firefox */
    column-count: 6;
}