How To Add Button Inside Textarea Using Javascript?

My client wants me to create a textarea inside where there has to be a button like the below picture: Into the above pictue please follow into the right side of the picture where

Solution 1:

To achieve this you can place both the textarea and button within the same div which has position: relative set on it. You can then make the button position: absolute and put it in the top right. Something like this:

.textarea-container {
  position: relative;
}
.textarea-container textarea {
  width: 100%;
  height: 100%;
  box-sizing: border-box;
}
.textarea-container button {
  position: absolute;
  top: 0;
  right: 0;
}

<div class="textarea-container">
  <textarea name="foo">Some content here...</textarea>
  <button>Menu</button>
</div>

I'll leave the styling for you to finalise as required.

Solution 2:

Here's a version more or less as you asked, however, due to the fact that the container-div for the menu will have to be placed outside the textarea, there isn't really a way for it to dynamically fit to the textarea using only CSS - so for that you will have to use JavaScript.

* {
  box-sizing: border-box;
}
#textareamenu_content ul,#textareamenu {
  display: none;
}
#textarea_container {
  position: relative;
  display: inline-block;
}
#textarea_container label {
  background: blue;
  color: white;
  padding: .2em;
  position: absolute;
  top: 0;
  right: 0;
  padding: .2em;
}
#textareamenu:checked ~ #textareamenu_content {
  position: absolute;
  top: 0;
  right: 0;
  overflow-y: scroll;
  max-height: 15em;
  min-height: 12em;
  min-width: 10em;
  border-left: 1.4em solid blue;
  z-index: 99;
}
#textareamenu:checked ~ #textareamenu_content ul {
  display: block;
}
textarea {
  min-height: 15em;
    min-width: 40em;
}
#textareamenu:checked ~ label {
  position: absolute;
  right: 8.6em;
  top: 0;
  width: 1.4em;
  z-index: 100;
}

<div id="textarea_container">
    <textarea name="text"></textarea>
    <input type="checkbox" id="textareamenu">
    <label for="textareamenu">{}</label>
    <div id="textareamenu_content">
        <ul>
            <li>First_Name</li>
            <li>Last_Name</li>
        </ul>
    </div>
</div>