Contenteditable Textarea alternative

HTML

<div class="middle">
                <span class="text">promise to</span>
                <div class="input" contenteditable="false">Your Promise</div>
            </div>

CSS

.middle {
  position: absolute;
  top: 38px;
  left: 0;
  width: 319px;
  height: 110px;
  padding-left: 12px;
  background: url('../images/promise-input-bg-sprite.png') 0px -38px no-repeat;
  box-sizing: border-box;
  line-height: 1.6;
}
.middle .text {
  position: absolute;
  margin-left: 1px;
}
.middle .input {
  position: relative;
  display: inline-block;
  word-wrap: break-word;
  text-indent: 140px;
  outline: none;
}
.middle .input p {
  padding: 0;
  margin: 0;
  text-indent: 0;
}
.middle .input p:first-child {
  text-indent: 140px;
}