<p>Вибери потрібне значення для <code>resize</code>, а потім спробуй змінити розмір блоку (розтігуючи його, вхопившись курсором за правий знизу куток):</p>

<div class="inputs">
  <input id="none" checked name="resize" type="radio"/>
  <label for="none">none</label>
  <message for="none">Розміри елемента не змінюються.</message>
  
  <input id="both" name="resize" type="radio"/>
  <label for="both">both</label>
  <message for="both">Можна змінювати розміри елемента по горизонталі та вертикалі.</message>
  
  <input id="horizontal" name="resize" type="radio"/>
  <label for="horizontal">horizontal</label>
  <message for="horizontal">Можна змінювати розміри елемента тільки по горизонталі.</message>
  
  <input id="vertical" name="resize" type="radio"/>
  <label for="vertical">vertical</label>
  <message for="vertical">Можна змінювати розміри елемента тільки по вертикалі.</message>
</div>

<p id="message">Розміри елемента не змінюються.</p>

<hr>

<div id="block">
  <p>Це вміст блоку</p>
</div>
* {
  box-sizing: border-box;
  padding: 0;
}

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

#form {
  padding: 8px 16px;
  font-size: 19px;
}

#block {
  font-size: 25px;
  text-align: left;
  background-color: yellow;
  padding: 16px;
  width: 250px;
  overflow: auto;
  resize: none;
}

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

message {
  display: none;
}
var $message = $('#message');

$('.inputs').find('input').on('change', function() {
  
  var $messageText = $("message[for='"+$(this).attr('id')+"']")
  $message.text($messageText.text());
  
  $('#block').css('resize', $(this).attr('id'));
  
});

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

  1. https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js