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

<input type="number" id="val" placeholder="ширина" value="50" min="0">px

<hr>
<span>Ця властивість визначає мінімальну ширину стовпця. Кількість стовпчиків буде максимальною кількістю стовпців, які можуть вміститися у контейнер, без стовпця, що має ширину менше, ніж значення column-width​. Фактична ширина стовпчика може бути меншою, ніж значення ширини стовпчика, якщо ширина контейнера менша.</span>
<div id="block">
  <p>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Suscipit quis corporis, odio recusandae velit praesentium consequuntur fugiat necessitatibus veritatis ipsum reiciendis voluptatum accusamus totam iste eius voluptatibus magni quia blanditiis.</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 {
  background: #f1f1f1;
  padding: 10px;
  transition: column-width .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: 50px;
     -moz-column-width: 50px; 
          column-width: 50px;
}

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

message {
  display: none;
}

var $message = $('#message');

$('#val').on('change', function() {
  var $messageText = $("message[for='"+$(this).attr('id')+"']")
  $message.text($messageText.text());
  $('#block').css('column-width', $(this).val() + 'px');
});