I recently came across an issue to mimic something found on Facebook (and probably elsewhere). The need was to have a textarea with buttons that are within the textarea. Now putting actual buttons in the textarea wouldn't work, but putting them on top could certainly work. The provided real world example was found on Facebook within the comments box that is at the bottom of posts in the feed. Below is a screenshot of it.
After diving into how Facebook did it it's actually really simple, and really good looking. How it works is to have buttons holder above the textarea and position them relative and move them down about 20 px. Then add a negative margin on that buttons holder so that the textarea the whole thing is moved up nicely. The last step is to add a padding-right to the textarea so that the typed text doesn't go behind the buttons. For a great polished look we used jQuery Autosizer to have the textarea resize automatically (and without a scrollbar along the right side.
Here is the final result, looks nice doesn't it? This is a simplified example, but with some known constraints it would be easy to create a generic HTML structure with CSS that would adapt to whatever needs might be needed within a structure.
See the Pen aAivh by Kenny (@Fernker) on CodePen
Space Mountain 3D recreation
Disneyland Resort Trivia App
Disneyland RCT 2 recreation