Text area that grows as you type

[mhulse]

 .ap_pseudo-input {
    -moz-outline-style: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    border-radius: 0.2rem;
    border: 1px solid #dcdcdc;
    outline: none;
    overflow: auto;
    margin: 0.5rem 0;
    padding: 1rem;
    resize: none;
    width: 100%;
}

.ap_pseudo-input::-webkit-input-placeholder,
.ap_pseudo-input:-moz-placeholder,
.ap_pseudo-input::-moz-placeholder,
.ap_pseudo-input:-ms-input-placeholder { color: #939393; }

/* https://coderwall.com/p/n55a0g/fixing-contenteditable-placeholders-with-3-lines-of-css */
.ap_pseudo-input[contenteditable=true]:empty::before {
    color: #939393;
    content: attr(data-placeholder);
}
/* @TODO May need to show the `textarea` if IE10, due to lack of `contenteditable` support. */
textarea.ap_pseudo-input {
    display: none;
}

<div
    class="ap_pseudo-input ap_js_textarea"
    contenteditable="true"
    data-placeholder="Type or click button to pick activity"
></div>
<textarea class="ap_pseudo-input" placeholder="Type or click button to pick activity"></textarea>

$(function() {

    // https://collectiveidea.com/blog/archives/2017/06/13/adjustable-form-text-area-with-the-contenteditable-tag

    var $textarea = $('.ap_js_textarea');
    var populate = function($this) {

        $this.next().val($this.text());

    }

    if ($textarea.length) {

        $textarea.each(function(key, val) {

            populate($(this));

        });

        $textarea.on('change keyup paste', function(event) {

            populate($(this));

        })

    }

});