title: Resize input field according to already entered input
body: <p>Alright for some reason I need to have an input field, which fills when a checkbox is ticked. The input field takes the value of the checkbox as input. After that I need to put the value in another input field which is readonly and is styled to NOT look like input (don't ask), but if the value is longer than the field, the text is partially shown.</p>
  
  <p>Now I have seen some code, which helps in similar situations like <a href="https://stackoverflow.com/a/41389961/9993676">here</a>, but it helps only when text is entered in the field. I need it to change according to the already entered value.</p>
  
  <p>I have this: </p>
  
  <pre><code>&lt;input type="checkbox" id="single_room" value="Single room"/&gt;
  &lt;input type="text" name="single_room_input" id="single_room_input" style="display: none;"&gt;
  </code></pre>
  
  <p>The value is then submitted and processed with php and displayed again in the other input field:</p>
  
  <pre><code>&lt;span class="text"&gt;
  {$single_room_input}
  &lt;/span&gt;
  &lt;input class="overview-data" name="single_room_input" value="{$single_room_input}" readonly&gt;
  </code></pre>
  
  <p>and if I use </p>
  
  <pre><code>$(function () {
  $('.overview-data').on('input', function () 
  { $('.text').text($('.overview-data').val()); });
  });
  </code></pre>
  
  <p>It does not resize the input field unless you actually input something in.</p>
  
  <p>If someone can please tell me if it is possible and if yes - how to do what I need to do I would be rally grateful.</p>