JSFiddle - React, Tailwind, and code Playground

HTML

<div class="columns">
    <div class="col"><label>1</label></div>
    <div class="col"><label>2</label></div>
    <div class="col"><label>3</label></div>
    <div class="col"><label>4</label></div>
    <div class="col"><label>5</label></div>
</div>

CSS

body {
  position: relative;
}

.columns {
    -webkit-columns: 10em;
    position:relative;
    columns: 10em;
    -webkit-column-gap: 2em;
    column-gap: 2em;
}

.columns .col {
    overflow: hidden;/*Remove Overflow and it works*/
    padding: 15px 20px;
    border: 2px dashed #CCC;
    -webkit-column-break-inside: avoid;
    page-break-inside: avoid;
    break-inside: avoid;
    position:relative;
}
.columns label::before{    
      content: "";
      position: absolute;
      width: 17px;
      height: 17px;
      left: 0;
      background-color: #ff0000;
}

JavaScript

//Chrome v45 Column Position Absolute Overflow Hidden bug