title: fixed text in text area using css and js
body: <p>i'm trying to fix a text in the beginning of text area, what I have right now is this : </p>
  
  <pre><code>  &lt;div&gt;
     &lt;textarea class="title-text" placeholder="do something..." rows="2" maxlength="80"&gt;&lt;/textarea&gt;
     &lt;span class="before-title"&gt;I will,&lt;/span&gt;
    &lt;/div&gt;
  </code></pre>
  
  <p>the details in this link : <a href="http://jsbin.com/tolifa/1/watch?html,css,output" rel="nofollow noreferrer">http://jsbin.com/tolifa/1/watch?html,css,output</a> </p>
  
  <p>but the real issue is when the user types text bigger than the textarea size ( the size of textarea should be unchanged), the fixed text is not moved to top  and this issue appears : <img src="https://i.stack.imgur.com/9G4Jt.png" alt="enter image description here"></p>
  
  <p>I need some JS to update to css <code>top</code> property of the class <code>before-title</code> when ever the textarea content is changed</p>