textarea填充问题与高度的变化

Question

我有一个简单的textarea，如下所示：

http://jsfiddle.net/o2gxgz9r/469/

我想做的是以下内容：

1. 如果输入中没有文字，则textarea的高度为50px。
2. 如果输入中有文字，请将文字区域的高度更改为auto，但保持50px的最小高度。只要textarea中有1行文本，textarea的高度就不应该改变。

我该怎么做？

$(document).on('input', 'textarea', function(event) {
  var el = $(this);

  if (el.val()) {
    el.addClass('active');
  } else {
    el.removeClass('active');
  }
});

body {
  margin: 50px;
}
textarea {
  font-family: "Arial";
  width: 600px;
  height: auto;
  padding: 16px 20px;
  line-height: 20px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<textarea placeholder="Enter some text..."></textarea>