Sliding icon next to dynamic text with ellipsis - html

Question

I have a list of items and to the end of some items I want to add an icon (or several of them - it's dynamic). Items' container has a fixed width and if item's text size is too big - I'd like to add ellipsis.
So the problem is that icon is added next to text and if text is long - the icon moves off the container. The template for all items has to be the same.
Note: not all items have icons and some icons may have more than one icon.
Note2: javascript solution is not applicable, want to make it in pure CSS.
Actual:
Expected:
Any help is much appreciated.
body {
font-size: 20px;
}
.container {
width: 150px;
background: #ff0;
list-style: none;
padding: 0px;
margin: 0px;
}
.container li {
border-bottom: 1px solid #000;
}
.item {
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
}
.icon {
background: #0f0;
}
<ul class="container">
<li>
<div class="item">
<span class="text">Text 1</span>
<span class="icon">12</span>
</div>
</li>
<li>
<div class="item">
<span class="text">Text 2 Text 2</span>
<span class="icon">12</span>
</div>
</li>
<li>
<div class="item">
<span class="text">Text 3 Text 3 Text 3</span>
<span class="icon">12</span>
</div>
</li>
<li>
<div class="item">
<span class="text">Text 4 Text 4 Text 4</span>
<span class="icon"></span>
</div>
</li>
</ul>

Answer 1

If anyone still looking for solution I figured it out:
Markup:
<div class="block-wrap">
<div class="block">
<div class="icon"></div>
<div class="text">Text text text text text text text text text text text text text text text text text text text</div>
</div>
</div>
Styles:
.block-wrap {
display: inline-block;
max-width: 100%;
}
.block {
width: 100%;
}
.text {
display: block;
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
}
.icon {
float: right;
margin-left: 10px;
width: 20px;
height: 14px;
background-color: #333;
}
https://jsfiddle.net/rezed/n1qft37L/

Answer 2

Try like this: Demo
Fix the width for the text next to .item class and make display as inline-block to get floated with icon.
CSS:
.item {
width:100%;
overflow: hidden;
}
.item >span {
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
max-width:70%;
display:inline-block;
}
.icon {
background: #f00;
display:inline-block;
max-width:50px;
}
Hope this helps :)