Пробел места рядом с последней строкой редактируемого div

Question

Я пытаюсь сделать что-то похожее на метку местоположения в окне сообщения Facebook, которое всегда рядом с последней текстовой строкой во время ввода.

Я попытался с двумя инлайн spans, но этикетка местоположение отображается рядом с правой границей текста span, как вы можете видеть.

Без Javascript динамически поместить метку местоположения, можно сделать что-то похожее на Facebook?

Посмотрите на this Fiddle

HTML:

<div> 
    <span class="textarea" class="status" contenteditable="true">foo 
foobarfoobar 
bar</span> 
    <span contenteditable="false"> — at Montréal</span> 
</div> 

CSS:

div{ 
    width: 190px; 
    border: 1px solid #dedee0; 
    padding: 10px; 
} 

.textarea{ 
    white-space: pre-wrap; 
    display: inline-block 
} 

.location{ 
    display: inline-block 
} 

Answer 1

И если вы используете встроенный только ?: FIDDLE

.textarea{ 
    white-space: pre-wrap; 
    display: inline; 
} 

.location{ 
    display: inline; 
} 

Answer 2

Внутри .textarea, изменить на display: inline;

Кроме того, я не знаю, было ли это намеренно, но вы никогда не применяли класс «местоположение» ко второму диапазону.