How to position two elements on the one line in HTML - html

Question

Here is my problem:
I need to put this number over"...".
Here is the HTML code:
<div class=" unread-object">
<div style="overflow: hidden; text-overflow: ellipsis;">
<a class="k-link nowrappable outdate-object" href="#/view/19260">
л ьотрипмасвчувсапмдгбыцячшльогтрнамам ам маугшпгнплрплроsdsds
</a>
<span class="unread-count" style="font-weight:normal; font-size:9px; color:rgb(161,187,206);float:right;">[3]</span>
</div>
</div>
float:right and left doesnt work. But, when I stretch fully slider:

Answer 1

use display:inline-block
<a class="k-link nowrappable outdate-object" href="#/view/19260" style="display:inline-block;">л ьотрипмасвчувсапмдгбыцячшльогтрнамам ам маугшпгнплрплроsdsds</a>
<span class="unread-count" style="font-weight:normal; font-size:9px; color:rgb(161,187,206); display:inline-block;">[3]</span>
I think this will solve your issue.
jsFiddle Link

Answer 2

When the width of the block does not align the two elements, the right will float line.
Simple solution is to use position:absolute;
In my example
I placed position:relative for the second div
<div style="overflow: hidden;position:relative; text-overflow: ellipsis;">
where you have content and the span with unread-count it's placed with position absolute;
.unread-object .unread-count{
position:absolute;
right:0px;
top:0px
}