title: Dynamically expand the height of a textarea when typing more then the max width
body: <p>How do I grow the textarea horizontally when typing more then the max width of a text area element? Also I don't want to see the horizontal scrollbar.</p>
  
  <p>rendered html</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false">
  <div class="snippet-code">
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;textarea name="CatchPhrase" class="input-validation-error" id="CatchPhrase" aria-invalid="true" aria-required="true" aria-describedby="CatchPhrase-error" rows="2" cols="20" data-val-required="The Catch Phrase field is required." data-val="true" data-val-maxlength-max="50"
  data-val-maxlength="The field Catch Phrase must be a string or array type with a maximum length of '50'." htmlattributes="{ id = profileCatchPhrase, class = form-control }"&gt;I like yoga sd;lasdlk asdks';aksd'asd 'asd';las ';asd'lasd';las'dl as'dla'sdl'asld as'd;las'dl; a;sdlka;sdklasd ;alsd;lkasda ;alskd;lkasd ;lkasd;lk&lt;/textarea&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>Before rendering HTML</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false">
  <div class="snippet-code">
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div class="form-group"&gt;
    @Html.LabelFor(model =&gt; model.CatchPhrase, htmlAttributes: new { @class = "control-label col-lg-2 col-md-2 col-sm-2 col-xs-2" })
    &lt;div class="col-lg-10 col-md-10 col-sm-10 col-xs-10"&gt;
      @Html.TextAreaFor(model =&gt; model.CatchPhrase, new { htmlAttributes = new { id = "profileCatchPhrase", @class = "form-control" } }) @Html.ValidationMessageFor(model =&gt; model.CatchPhrase, "", new { @class = "text-danger" })
    &lt;/div&gt;
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>