Span width is not reduced after ellipsis in CSS - html

Question

I have 1 parent li element with 2 child spans in it.
My first span has large title so i applied ellipsis to the parent li.
My issue is when the 1st span is ellipsis, The 2nd span which should aligned next to it is being place after the full width of 1st span.
To be more clear, 1st span is title and 2nd span is count.
#title {
color: black;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
width: 200px;
}
#view-count {
font-size: 10px;
margin-left: 4px;
border-radius: 10px;
line-height: 1;
position: absolute;
top: 30%;
}
<li id="title" title="Documentationxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx">
<span>Documentationxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx</span>
<span id="view-count">370</span>
</li>
Below is the JSFiddle for it.
JSFiddle
Any help?

Answer 1

You have to apply ellipsis to first span and have to remove position from second span.
Check snippet.
#title {
color: black;
position: relative;
width: 240px;
}
.ellipsis {
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
width: 200px;
}
span {
display: inline-block;
}
#view-count {
font-size: 10px;
margin-left: 4px;
border-radius: 10px;
line-height: 1;
position: absolute;
z-index: 1;
background: #ff0000;
top: -5px;
right: 0;
}
<li id="title" title="Documentationxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx">
<span class="ellipsis">Documentationxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx</span>
<span id="view-count">370</span>
</li>

Answer 2

You can use flex for this:
.title {
display: flex;
width: 200px;
}
.title > span:nth-child(1) {
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
flex: 1 1 auto;
background-color: #FC0;
}
.title > span:nth-child(2) {
flex: 0 0 auto;
background-color: #CF0;
}
<ul>
<li class="title">
<span>Documentation documentation documentation documentation documentation documentation</span>
<span>370</span>
</li>
<li class="title">
<span>Documentation</span>
<span>370</span>
</li>
</ul>