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-containertextarea {
  width: 100%;
  height: 100%;
  box-sizing: border-box;
}
.textarea-containerbutton {
  position: absolute;
  top: 0;
  right: 0;
}

<divclass="textarea-container"><textareaname="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_contentul,#textareamenu {
  display: none;
}
#textarea_container {
  position: relative;
  display: inline-block;
}
#textarea_containerlabel {
  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_contentul {
  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;
}

<divid="textarea_container"><textareaname="text"></textarea><inputtype="checkbox"id="textareamenu"><labelfor="textareamenu">{}</label><divid="textareamenu_content"><ul><li>First_Name</li><li>Last_Name</li></ul></div></div>