How to Make Any CSS Element Resizable 🔧 (Without JavaScript):

Source: Dev.to

The resize property

By default, elements aren’t resizable.
To make an element resizable (like a <textarea>), you can use the CSS resize property:

/* Make the element resizable in both directions */
resize: both;

/* The element must also have an overflow value that allows scrolling */
overflow: auto; /* or overflow: scroll; */

The second line is crucial—resize won’t work unless you also set overflow to something scrollable (e.g., auto or scroll).

The three values of resize

/* Allow resizing both horizontally and vertically */
resize: both;

/* Allow only horizontal resizing */
resize: horizontal;

/* Allow only vertical resizing */
resize: vertical;

With resize: both;, users can grab the bottom‑right corner of the element and drag to resize it. The only limitation is that resizing is possible only from the corners, not from the sides. This behavior may be sufficient for many use cases.