Content editable inline div moves when empty

Question

Here is an example: http://jsfiddle.net/nojv18wf/

<div>
    <div class="display">Blah blah blah?</div>
    <div class="input" contenteditable="true"></div>
</div>

<br /><br /><br /><br />

<div>
    <div class="display">Blah blah blah?</div>
    <div class="input border" contenteditable="true"></div>
</div>

Watch where the caret goes when you click on "blah blah blah."

In the first example, it jumps to before the blah blah blah, until you type text, and then it appears in the correct place.

In the second example, with the border, it works as it should.

How can I get the caret to appear in the correct place without adding an ugly border?

EDIT: This appears to be happening only in Chrome, it works normally in Firefox and even IE.

EDIT 2: The reason I am using inline is so that the text wraps as if it was a smooth continuation, not wrap the whole block. E.G: http://jsfiddle.net/khkurs5t/

Answer 1

You can always add a transparent border to your input, Fiddle

border: solid 1px transparent;

This will keep your text on the same line as you mentioned as well.

NOTE* Guess who doesn't like to keep text on the same line though... Yes... IE But this method does work in all other browsers. Good luck my friend!

Answer 2

You can use inline-block layout together with min-width.

.input{ display: inline-block; min-width: 1px;}

JSFiddle