JSFiddle - React, Tailwind, and code Playground

HTML

<div class="outer">
    <div class="inner1"></div>
    <div class="inner2">
		<div class="text2">
			<span class="title">This long sentence</span> should definitely all be on one line.<br />
			This should all be on the next line and not wrap
		</div>
    </div>
</div>

CSS

.outer
{
}
.inner1
{
   margin-right:10px;
    float:left;
	width:80px;
	height:80px;
	background-image:url('http://www.google.com/favicon.ico');
	background-size:cover;
	background-repeat: no-repeat;
	background-position: 50% 50%;
}
.inner2
{
	display:inline;
	height:80px;
	padding-left:20px;
}
.title
{
	padding-right:20px;
	font-weight:bold;
}
.text2
{
	white-space:nowrap;
	overflow:hidden;
	text-overflow:ellipsis;
}