将跨度放在可编辑div的最后一行旁边

Question

I try to do something similar to the location label in the Facebook message box which is always next to the last text line while we are typing.

I tried with a two inline spans , but the location label appears next to the right border of the text span as you can see.

Without any Javascript to dynamically place the location label, is it possible to do something similar to Facebook?

Take a look at 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

And if you use inline only?: FIDDLE

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

.location{
  display: inline;
}

Answer 2

Inside .textarea , change to display: inline;

Also, I don't know if this was intentional, but you never applied the "location" class to the second span.