Button inside the textarea overlaps text - html

Question

I am having an issue here where the text overlaps the Emoji button .
Basically I want the text to stop before reaching the emoji.
I tried this which surprisingly did not work for me http://jsfiddle.net/36bw0nmo/14/
Thank you
This is my fiddle https://jsfiddle.net/w0s4y5nk/14/
textarea#sendMessage {
height:50px;
width: calc(100vw - 15px);
position: absolute;
bottom: 16px;
resize: none;
border: none;
font-size: 13px;
padding: 5px 5px 5px 10px;
border: solid 5px
}
#myButton {
position: absolute;
bottom: 10px;
right: 5px;
margin-left: 60px;
}
<textarea id="sendMessage"> </textarea>
<p id="myButton" role="img" onclick='$("#picker").toggle()'>&#x1F642</p>
<emoji-picker id="picker"> </emoji-picker>

Answer 1

I hope this is what you want
.textarea-container {
display: flex;
justify-content: space-between;
align-items: flex-end;
height: 50px;
max-width: 96%;
width: 96%;
margin: 0 auto;
position: absolute;
box-sizing: content-box;
bottom: 16px;
padding: 6px;
border: solid 1px #ccc;
border-radius: 4px;
}
textarea#sendMessage {
max-width: 100%;
width: 100%;
height: 100%;
resize: none;
border: none;
font-size: 13px;
scrollbar-width: none;
-ms-overflow-style: none;
}
textarea#sendMessage::-webkit-scrollbar {
display: none;
}
textarea:focus {
outline: none !important;
}
#myButton {
width: 24px;
height: 24px;
display: inline;
cursor: pointer;
padding-left: 4px;
margin: 0;
}
<div class="textarea-container">
<textarea id="sendMessage"> </textarea>
<p id="myButton" role="img" onclick='$("#picker").toggle()'>&#x1F642</p>
<emoji-picker id="picker"> </emoji-picker>
</div>
run snippet code and see the result.