JSFiddle - React, Tailwind, and code Playground

HTML

<div class="outer" style="margin: 40px auto; width: 500px; border: 1px solid red">
    <div class="container">
      <div class="input left"><input name="TV40" id="TV40" value="yes" type="checkbox"></div>
      <div class="label right"><label for="TV40">This is a rather long text to break into three separate lines but - sometimes - not to stay in one column.</label></div>
    </div>    
    <div class="container">
      Next column
    </div>
</div>

CSS

.outer {
    -moz-column-count: 2;
    -webkit-column-count: 2;
    column-count: 2;
    -webkit-column-gap: 1.6em;
    -moz-column-gap: 1.6em;
    column-gap: 1.6em;
}
.container {
  break-inside: avoid;
  page-break-inside: avoid;
  -webkit-column-break-inside: avoid;
  display: -webkit-box;
  display: -moz-box;
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;
  flex-flow: row nowrap;
  align-items: center;
}
div.input {
    width: 16px;
    -webkit-box-flex: 0;
    -moz-box-flex: 0;
    -webkit-flex: 0 0 160px;
    -ms-flex: 0 0 160px;
    flex: 0 0 16px;
}
div.left {
  margin: 0 0.5em;
}
div.right {
  padding-right: 0.5em;
}
}