<p>Вибери потрібне значення для <code>columns</code>:</p>

<input type="number" class="input" id="width" placeholder="ширина" value="75" min="0">
<input type="number" class="input" id="count" placeholder="кількість" value="3" min="0">

<hr>
<span>Ця властивість визначає мінімальну ширину стовпця, а також кількість власне стовпчиків. Кількість стовпчиків буде максимальною кількістю стовпців, які можуть вміститися у контейнер, без стовпця, що має ширину менше, ніж зазначено для columns. Фактична ширина стовпчика може бути меншою, ніж значення ширини стовпчика, якщо ширина контейнера менша.</span>
<div id="block">
  <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Vel, libero voluptatibus. Hic doloremque odio aliquam ea facilis voluptate deserunt, fugiat velit voluptas? Iusto, possimus ab fugiat error aliquam amet nesciunt.</p>
</div>

* {
  box-sizing: border-box;
  padding: 0;
}

body {
  font-family: momospace;
  font-size: 17px;
  line-height: 1.5;
  color: #222;
}

p {
  margin-top: 0;
}

.inputs {
  padding: 8px 16px;
  font-size: 19px;
}

#block {
  margin-top: 20px;
  background: #f1f1f1;
  padding: 10px;
  transition: columns .15s ease-in;
  
  -webkit-column-rule-width: 1px;
     -moz-column-rule-width: 1px; 
          column-rule-width: 1px;

  -webkit-column-rule-color: gold;
     -moz-column-rule-color: gold;
          column-rule-color: gold;
  
  -webkit-column-rule-style: solid;
     -moz-column-rule-style: solid;
          column-rule-style: solid;
  
  -webkit-column-width: 75px;
     -moz-column-width: 75px; 
          column-width: 75px;
  
  -webkit-column-count: 3;
     -moz-column-count: 3; 
          column-count: 3;
}

#text {
  height: 60px;
  background-color: #eee;
  padding: 16px 0;
}

message {
  display: none;
}

$('.input').on('change', function() {
  console.log($('#width').val() + 'px' + $('#count').val());
  $('#block').css('columns', $('#width').val() + 'px ' + $('#count').val());
});