<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;
}