<table>
  <tr><td><input type="text" class="input" ></td></tr>
  <tr><td><input type="text" class="input"></td></tr>
</table> 

.input { 
  font-size: 16px;
  padding: 7px 10px;
  color: #333;
  border: 1.7px solid #666;
  border-radius: 4px;
  outline: none;
}
.input:focus {
  border-color: #1c6295;  
}

var input = document.getElementsByClassName('input'); 
for (var i = 0 ; i < input.length; i++) {
  input[i].addEventListener('input', resizeInput);
  resizeInput.call(input[i]);
}
function resizeInput() {
  this.style.width = this.value.length + "ch";
}