Is there a way to resize a textarea using Pure CSS without affecting the structure of the table:
Heading:
<div class="pure-u-1 pure-u-md-1-8">
<label class="boldText">Nmbr</label>
</div>
<div class="pure-u-1 pure-u-md-2-5">
<label class="boldText">ques</label>
</div>
<div class="pure-u-1 pure-u-md-1-5">
</div>
<div class="pure-u-1 pure-u-md-1-5">
<label class="boldText">comments</label>
</div>
Row1:
Bla Bla<div class="pure-u-1 pure-u-md-2-5">
One more Bla
</div>
<div class="pure-u-1 pure-u-md-1-5">
One More Bla
</div>
<div class="pure-u-1 pure-u-md-1-5">
<textarea class="normal" style="height: 75px; width:300px; overflow: hidden; word-wrap: break-word; resize: horizontal;" name="commento" id="commento"></textarea>
</div>
The issue arises when attempting to widen the textarea beyond the confines set by the "pure-u-md-1-5 div" class.
Expanding the width using inline styles like "width:400px" does not have any effect on the textarea's size.
If adjusting the width of the surrounding div, the textarea jumps to a new line. Even slight adjustments in pixel values such as from 400px to 490 or 495 cause the textarea to shift when zooming in and out of the page.
Is there a way to increase the width of the textarea without altering the parent div?