I am trying to make a notes app, which has textarea and user can add checkboxes and other tools as well (like notion). but I can't combine those all well inside a container.Here's the html for container in which

 <div class="editor">
 <input type="text" class="notes-title" placeholder="Your Title...">
 <div class="text-body">
     <textarea class="notes-body" placeholder="Start writing your notes here..."></textarea>
  </div>
 </div>

This is what I add using insertAdjacentHTML() in JS,

<div class="tool-container">
<input type="checkbox" id="checkbox" value="HTML"><span class="checkmark"></span>
<label for="html"><textarea class="notes-body" placeholder="task..."></textarea></label>
</div>

I want to add the checkbox after the endline of the textarea, but the checkbox is added at the sameplace inside editor, no matter where textarea ends, and if the text area overflows it starts scrolling in the same space rather than expanding. CSS classes

.notes-body{
    flex-shrink: 1;
    line-height: 1.5;
    overflow: visible;
}
.text-body {
    display: flex;
    flex-direction: column;
    font-size: 1.2em;
    line-height: 1.5;
    margin-top: 3px;
    padding: 5px;
    width: 100%;
    height:100%;
}
.tool-container{
    display: flex;
    flex-shrink: 1;
    line-height: 1.5;
    cursor: pointer;
    font-size: 22px;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}
.tool-container input {
    position: absolute;
    opacity: 0;
    cursor: pointer;
    height: 0;
    width: 0;
  }
  .tool-container .notes-body{
    
    width: 100%;
    height: 100%;
    line-height: 1.5;
}
.tool-bar{
    border-top: solid grey 1px;
    display: flex;
    padding: 3px;
    margin: 5px;
}

Please help me set the textarea such that it expands inside parent container, and the next flex-item (checkbox/img etc) comes right next to it.