SOURCE

$('textarea').keyUp(function() {
    $(this).height(this.clientHeight);
    alert(this);
  });

<div class=editor>
  <input class=title placeholder="标题" />
  <textarea class=desc placeholder="描述（可选）" wrap=hard contenteditable></textarea>
  <ul>
    <li>
      <div class=media>
        <div class=product>
          <img src="https://beauty.nosdn.127.net/beauty/img/a97ac5f2-5805-4f4c-bbb8-e93d12fdb596.jpg"
          />
        </div>
        <span class=reorder>
          <i>
          </i>
          <i>
          </i>
          <i>
          </i>
        </span>
      </div>
      <div class=note>
        <input type=text placeholder="备注" />
      </div>
    </li>
    <li>
      <div class=media>
        <div class=product>
          <img src="https://beauty.nosdn.127.net/beauty/img/a97ac5f2-5805-4f4c-bbb8-e93d12fdb596.jpg"
          />
        </div>
        <span class=reorder>
          <i>
          </i>
          <i>
          </i>
          <i>
          </i>
        </span>
      </div>
      <div class=note>
        <input type=text placeholder="备注" />
      </div>
    </li>
  </ul>
</div>

input {
  border: none;
  outline: none;
}
.editor {
  box-sizing: border-box;
  word-wrap: break-word;
  word-break: break-all;
  -webkit-fontsmoothing: antialiased;
  -webkit-tap-highlight-color: transparent;
  -webkit-touch-callout: none;
  -webkit-user-callout: none;
  -webkit-user-select: none;
  user-select: none;
  background: #fff;
  font: normal normal 16px/1.2 -apple-system-font;
  padding: 1em;
  .title {
    display: block;
    padding: 6px 0;
    border: none;
    width: 100%;
    outline: none;
    font-size: 21px;
    margin-bottom: 1em;
  }
  .desc {
    display: block;
    font-size: 16px;
    width: 100%;
    height: auto;
    line-height: 1.56;
    border: none;
    outline: none;
    padding: 0;
  }
  ul {
    padding: 0;
    list-style: none;
    li {
      border: 1px solid #ccc;
      border-radius: 2px;
      margin-bottom: 1em;
      .media {
        position: relative;
        .product {
          height: 115px;
          padding: 0;
          &:before {
            content: '';
            display: inline-block;
            margin: 0;
            padding: 0;
            border: 0;
            width: 0px;
            height: 100%;
            vertical-align: middle;
          }
          img {
            display: inline-block;
            vertical-align: middle;
            width: 100px;
            height: 100px;
          }
        }
        .reorder {
          height: 40px;
          width: 40px;
          position: absolute;
          right: 1em;
          top: 2em;
          display: flex;
          flex-direction: column;
          > i {
            display: block;
            flex-grow: 1;
            &:not(:last-child) {
              margin-bottom: 8px;
            }
            background: #ccc;
          }
        }
      }
      .note {
        border-top: 1px solid #ccc;
        padding: .6em;
        font-size: 14px;
      }
    }
  }
}