Bootstrap list-group in oneline with badge

ellipsis.css

.ellipsis {
    display: -webkit-flex;
    display: flex;
}
.ellipsis .ellipsis-item {
    -webkit-flex: 1;
    flex: 1;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.ellipsis .badge {
    margin: 1px 0 1px 4px;
}

example in jsfiddle

https://jsfiddle.net/L8zpo14j/1/

example.html

<p>Example</p>
<div class="panel panel-info">
	<div class="panel-heading">One Line List Item</div>
	<ul class="list-group">
		<li class="list-group-item ellipsis">
    		<span class="ellipsis-item">A-long-long-long-long-long-long-long-long-long-long-text</span>
    		<span class="badge">badge</span>
		</li>
		<li class="list-group-item ellipsis">
    		<span class="ellipsis-item">A-long-long-long-long-long-long-long-long-long-long-text</span>
    		<span class="badge">badge</span>
		</li>
	</ul>
</div>