css - Automatic adjustment of form width with textarea witdh in HTML -

i have problem concerning width of form. understand better, please @ following 2 images.

i adjust length of form length of text area, width of text area not longer form (see screenshot 2). please show me how can that? tried set width of text area on auto (like height) width doesn't work. in following can see code:

<form role="form" class="row-fluid hide comment popover"> <div class="form-group">     <label>comments on test</label>     <textarea class="form-control" id="comment_text" form="comment" name="text" placeholder="there no comment yet"></textarea> </div> <div class="form-group">     <input class="btn btn-default" type='button' value='submit comment' onclick='updatecomment("@module",this.parentelement)' /> </div> 

thank in advance.

greets.

you can set max-width form element , enable partial width changing:

<form>     <textarea></textarea> </form>  <script>     form {background: grey; width: 400px; padding: 20px;}     textarea {padding:0; background: blue; width: 200px; height: 100px; max-width: 400px;} </script> 

http://jsfiddle.net/y0gp8dtx/

or

set min-width form element , add display: inline-block or float: left prevent default width: 100%

form {background: grey; min-width: 400px; padding: 20px; display: inline-block;} textarea {padding:0; background: blue; width: 200px; height: 100px;} 

http://jsfiddle.net/y0gp8dtx/2/