<form action="#" method="post">
      <h2> Vertical Only </h2>
      <textarea name="elem" id="elem" rows="5" cols="50" class="vert"></textarea>

      <h2> Horizontal Only </h2>
      <textarea name="elem" id="elem" rows="5" cols="50" class="horiz"></textarea>

      <h2> Both </h2>
      <textarea name="elem" id="elem" rows="5" cols="50" class="both"></textarea>

      <h2> No Resizing </h2>
      <textarea name="elem" id="elem" rows="5" cols="50" class="none"></textarea>
   </form>
body {
  margin: 50px auto;
  font-family: "Lato";
  font-weight: 300;
  width: 600px;
}

.both {
  resize: both;
}
.vert {
  resize: vertical;
}
.horiz {
  resize: horizontal;
}
.none {
  resize: none;
}

External CSS

  1. https://fonts.googleapis.com/css2?family=Lato:[email protected];900&amp;display=swap

External JavaScript

This Pen doesn't use any external JavaScript resources.