title: why Button is hidden inside Textarea , after moving the button inside textarea
body: <p>I am trying to move a button from outside to inside of textarea using javascript</p>
  <pre><code>messageSubject.insertAdjacentElement('beforeend',_sendbtn);
  </code></pre>
  <p>it moves the send button inside the textarea but is not visible to ui now.</p>
  <p>HTML</p>
  <pre><code>&lt;tr&gt;
      &lt;td&gt;
          &lt;textarea name=&quot;subject&quot; required=&quot;Required&quot; id=&quot;messageSubject&quot; maxlength=&quot;501&quot; validatewhiletyping=&quot;true&quot; placeholder=&quot;Please enter the subject&quot; aria-labelledby=&quot;intro-message-subject&quot;&gt;
          &lt;button class=&quot;dx-submit dx-btn dx-btn-primary &quot; id=&quot;_sendbtn&quot; aria-label=&quot;Send your message&quot;&gt;Send&lt;/button&gt;
          &lt;/textarea&gt;
          &lt;span class=&quot;sr-only&quot;&gt;&lt;/span&gt;
          &lt;div role=&quot;region&quot; id=&quot;messagesubjectValidation&quot; aria-live=&quot;assertive&quot;&gt;&lt;/div&gt;
      &lt;/td&gt;
  &lt;/tr&gt;
  </code></pre>
  <p>css</p>
  <pre><code>  #messageSubject{
      margin-bottom:5px;
      box-shadow:none;
      }
      .dx-btn-primary{
      background:blue;
      border:1px solid;
      color:white;
      padding:4px 10px;
      text-align:center;
      }
  .dx-btn{
  font-size:16px;
  font-weight:inherit;
  display:inline-block;
  }
  
  .dx-widget .cx-btn{
  display:inline-block;
  margin-bottom:0;
  line-height:1.666em;
  white-space:nowrap;
  vertical-align:middle;
  }
  </code></pre>
  <p>I have tried using position:absolute for button and position:relative for textarea but didn't worked.</p>