Resize any element

Allow users to resize HTML elements using the resize CSS property. Make sure the element is not inline, and its overflow is not set to visible.

CSS

.resize {
  resize: both; /* Allows horizontally and vertically */
}

.resize-y {
  resize: vertical;
}

.resize-x {
  resize: horizontal;
}

.resize,
.resize-y,
.resize-x {
  overflow: auto; /* hidden, scroll, or auto */
}

/* Presentational styles */
.demo-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  justify-items: center;
  align-items: center;
}

.card {
  padding: 0.5rem;
  font-size: 1rem;
  color: #404040;
  background-color: #E5E5E5;
  border-radius: 0.125em;
}

HTML

<div class="demo-grid">
  <div class="card resize">Resize horizontally & vertically.</div>
  <div class="card resize-y">Resize vertically.</div>
  <div class="card resize-x">Resize horizontally.</div>
</div>

Preview

Resize horizontally & vertically.

Resize vertically.

Resize horizontally.