Offset the text wrap of a textarea so text isn't obscured by icon

Question

I'm working on a chat application in HTML. To type a message, the user types in a <textarea>. To help indicate the purpose of the textarea and improve usability, there is a button that sends the message on top of the <textarea>. However, when the user types a longer message, the text reaches the end of the line and is partially covered up by the icon. Although there are CSS properties that control the behavior of text-wrapping, I can't find anything that would 'offset' the text wrap so that new text would go to a new line once it reached the icon. Is there a CSS property or JS workaround that would accomplish this?

Answer 1

padding-right seems like the way to go. Something like this?

.wrapper {
    position: relative;
    display: inline-block;
}
textarea {
    padding-right: 20px;
}
button {
    position: absolute;
    top: 0;
    right: 0;
}

<div class="wrapper">
    <textarea rows="7" cols="40"></textarea>
    <button>B</button>
</div>