JSFiddle - React, Tailwind, and code Playground
HTML
<div class="wrapper-wrapper">
<div class="wrapper">
<div class="left">
<image src="http://s4.postimg.org/i1huts8vt/kitten.png" />
</div>
<div class="right">
Text row 1 is a very freaking wide row with tons of text so deal with it or gtfo. Do I have enough text to fill this box now ?
</div>
</div>
</div>
CSS
.wrapper-wrapper {
width: 600px;
}
.wrapper {
border:1px solid #aaa;
margin:0 0 10px 0;
display: table;
width: 100%;
}
.left {
width:200px;
background-color:#eee;
}
.left, .right {
display: table-cell;
padding:5px;
}
.right {
overflow:hidden;
white-space:nowrap;
text-overflow:ellipsis;
}