click on div[contenteditable] if last element is span[contenteditable="false"]

Question

If click on the div after all text, the div is focused but the caret is not set (the caret set in span.notContentEditable and not shown) ( problem exist in firefox/vivaldi/(chrome on ubuntu 19.10) )

 div[name="comment"] { -moz-appearance: textfield-multiline; -webkit-appearance: textarea; border: 1px solid gray; font: medium -moz-fixed; font: -webkit-small-control; height: 100px; width: 100%; overflow: auto; padding: 5px; resize: both; margin-bottom: 5px; } .bold { font-weight: bold; }

 <div name="comment" contenteditable="true"> <span class="bold" contenteditable="false">spantext</span> </div>

Answer 1

This is not clear what you ask, but if you want to keep the span on left corner and the other text won't overlap it you can do something like this:

(without changing your markup:)

 div[name="comment"] { -moz-appearance: textfield-multiline; -webkit-appearance: textarea; border: 1px solid gray; font: medium -moz-fixed; font: -webkit-small-control; height: 100px; width: 100%; overflow: auto; padding: 5px; resize: both; margin-bottom: 5px; position: relative; /* added */ padding-left: 60px; } .bold { font-weight: bold; } span {position: absolute; top: 5px; left: 0;}

 <div name="comment" contenteditable="true"> <span class="bold" contenteditable="false">spantext</span> </div>

Another solution can be using the text-indent property, but you need to change a little your markup:

 section {position: relative;} div[name="comment"] { -moz-appearance: textfield-multiline; -webkit-appearance: textarea; border: 1px solid gray; font: medium -moz-fixed; font: -webkit-small-control; height: 100px; width: 100%; overflow: auto; padding: 5px; resize: both; margin-bottom: 5px; text-indent: 80px; /* space for the first line and on every NEW LINE */ } .bold { font-weight: bold; } span {position: absolute; top: 5px; left: 0;}

 <section> <span class="bold" contenteditable="false">spantext</span> <div name="comment" contenteditable="true"></div> </section>