JSFiddle - React, Tailwind, and code Playground
HTML
<div id="container">
<div class="row">
<div class="iconcolumn">icons</div>
<div class="updatecolumn">18:00</div>
<div class="textcolumn"><span class="title">1 2 3 4 5 6</span><span> 7 8 9 10 11 12 13 14 15 16 17 18 19 20</span></div>
</div>
<div class="row">
<div class="iconcolumn">icons</div>
<div class="updatecolumn">2013:03:01</div>
<div class="textcolumn"><span class="title">1 2 3 4 5</span><span> 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20</span></div>
</div>
<div class="row">
<div class="iconcolumn">icons</div>
<div class="updatecolumn">2013:03:01</div>
<div class="textcolumn"><span class="title">1 2 3 4</span><span> 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20</span></div>
</div>
</div>
<br/>
<div id="container">
<div class="row">
<div class="iconcolumn">icons</div>
<div class="textcolumn"><span class="title">1 2 3 4 5 6</span><span> 7 8 9 10 11 12 13 14 15 16 17 18 19 20</span></div>
<div class="updatecolumn">18:00</div>
</div>
<div class="row">
<div class="textcolumn"><span class="title">1 2 3 4 5</span><span> 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20</span></div>
</div>
<div class="updatecolumn">2013:03:01</div>
<div class="iconcolumn">icons</div>
<div class="row">
<div class="updatecolumn">2013:03:01</div>
<div class="textcolumn"><span class="title">1 2 3 4</span><span> 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20</span></div>
<div class="iconcolumn">icons</div>
</div>
</div>
CSS
#container {
width: 300px;
height: auto;
background-color: #CCC;
border: 1px solid red;
}
.row {
clear: both;
height: 1.8em;
line-height:1.8em;
position: relative;
border: 2px solid black;
}
.iconcolumn {
float:left;
display:inline-block;
border: 1px solid green;
}
.textcolumn {
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
border: 1px solid blue;
width: auto;
position: static;
}
.updatecolumn {
display:inline-block;
float:right;
width: auto;
border: 1px solid green;
position: static;
/*position: absolute;
top: 0%;*/
}
.title {
font-weight: bold;
}