JSFiddle - React, Tailwind, and code Playground

by danield770

HTML

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

CSS

.outer
{
}
.inner1
{
	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
{
	height:80px;
	padding-left:10px;
	vertical-align:middle;
    overflow: auto;
    padding-top: 20px;
}
.text1
{
	padding-right:5px;
	float:left;
	font-weight:bold;

}
.text2
{
	overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    
}