title: CSS width:100% textarea for comment (responsive)
body: <p>I need little help for my CSS. </p>
  
  <p>I am trying to make a comment system but it has something went wrong. </p>
  
  <p>This is my <a href="http://codepen.io/shadowman86/pen/RPryvz" rel="nofollow noreferrer"><strong>DEMO</strong></a> page from <em>codepen.io</em> </p>
  
  <p>You can see there is a user avatar and textarea. The container <code>max-width:650px;</code> when you reduced width the browser the it is automatically changing. </p>
  
  <p>anyone can help me in this regard?</p>
  
  <p><strong>HTML</strong></p>
  
  <pre><code>&lt;div class="container"&gt;
    &lt;div class="comment"&gt;
      &lt;div class="commenter"&gt;
        &lt;img src="https://igcdn-photos-c-a.akamaihd.net/hphotos-ak-xta1/t51.2885-19/11084950_1591056347778266_1536322251_a.jpg"&gt;
      &lt;/div&gt;
      &lt;div class="comment-text-area"&gt;
        &lt;textarea class="textinput" placeholder="Comment"&gt;&lt;/textarea&gt;
      &lt;/div&gt;
    &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p><strong>CSS</strong></p>
  
  <pre><code>body {
    background-color: #dddddd;
  }
  
  .container {
    position: relative;
    max-width: 650px;
    margin: 0px auto;
    margin-top: 50px;
  }
  
  .comment {
    background-color: blue;
    float: left;
    width: 100%;
    height: auto;
  }
  
  .commenter {
    float: left;
  }
  
  .commenter img {
    width: 35px;
    height: 35px;
  }
  
  .comment-text-area {
    float: left;
    width:100%;
    height: auto;
    background-color: red;
  }
  
  .textinput {
    float:left;
    width: 100%;
    min-height: 35px;
    outline: none;
    resize: none;
    border: 1px solid #f0f0f0;
  }
  </code></pre>
  
  <p>I want to make it like this:</p>
  
  <p><img src="https://i.stack.imgur.com/BGjKJ.jpg" alt="enter image description here"></p>