<div class="container">
  <textarea name="txt" id="txt" cols="30" rows="10">Textarea resizable in both directions.</textarea>
  <textarea name="text" id="text" cols="30" rows="10" class="no-resize">Non-resizable textarea.</textarea>
  <p class="vertical">
    <span>Paragraph resizable vertically.</span>
    <br>
    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Odit, necessitatibus, sint assumenda sunt praesentium nulla ut dignissimos minus dolores iusto a ex placeat quas. Alias, nemo corrupti ea nobis illum.
  </p>
  <div class="horizontal">
    <h3><span>This is a div that is resizable horizontally only.</span></h3>
    <p>
      Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quibusdam, quaerat, totam, corporis odio suscipit iusto laudantium ratione alias impedit dolores libero nemo facere est reiciendis dolorum eius harum. Ipsum, suscipit?
    </p>
  </div>
</div>
body {
  background-color: #F5F5F5;
  color: #555;
  font-size: 1.1em;
  font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
}

hr {
  margin: 50px 0;
}

.container {
  margin: 40px auto;
  max-width: 800px;
}

.element {
  padding: 20px;
}

textarea {
  padding: 1em;
  color: grey;
  display: block;
  width: 50%;
  margin: 30px auto;
  resize: auto;
}

textarea.no-resize {
  resize: none;
}

p,
div.horizontal {
  background-color: white;
  padding: 1em;
  margin: 30px auto;
}

span {
  color: deepPink;
}

p.vertical {
  width: 200px;
  height: 250px;
  overflow: scroll;
  resize: vertical;
}

div.horizontal {
  width: 450px;
  resize: horizontal;
  overflow: scroll;
}