Estoy tratando de hacer una aplicación de notas, que tiene un área de texto y el usuario también puede agregar casillas de verificación y otras herramientas (como noción). pero no puedo combinarlos bien dentro de un contenedor. Aquí está el html para el contenedor en el que

 <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>

Esto es lo que agrego usando insertAdjacentHTML() en 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>

Quiero agregar la casilla de verificación después de la línea final del área de texto, pero la casilla de verificación se agrega en el mismo lugar dentro del editor, sin importar dónde termine el área de texto, y si el área de texto se desborda, comienza a desplazarse en el mismo espacio en lugar de expandirse. clases de css

 .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; }

Por favor, ayúdenme a configurar el área de texto de modo que se expanda dentro del contenedor principal y el siguiente elemento flexible (casilla de verificación/img, etc.) esté justo al lado.