CSS How to force DIVs side by side with text overflow? - html

Question

I need force 2 divs side by side as it below in example :
#colwrap{
overflow:hidden;
background-color: orange;
width:300px;
}
#colLeft {
height: 48px;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
#colRight {
background-color: #c3d0ff;
height: 48px;
float: right;
}
//This is cool
<div id="colwrap">
<div id="colRight">icon1, icon2</div>
<div id="colLeft">Really long long long name of file.txt</div>
</div>
<br>
//But this is wrong :
<div id="colwrap">
<div id="colRight">icon1, icon2</div>
<div id="colLeft">Short name of file.txt</div>
</div>
//It should look like this, when text is shorter :
<div id="colwrap">
<div id="colLeft" style="float:left;">Short name of file.txt</div>
<div id="colRight" style="float:left">icon1, icon2</div>
</div>
fiddle : https://jsfiddle.net/2jno80ba/
!There is div contains name of file, on every end of file must be container for multiple icons, when text is larger, then container is fixed on end.1

Answer 1

you can use flex-box to achieve this.
check this pen out:
http://codepen.io/anon/pen/aOExbb
I just modified your css a bit:
#colwrap{
overflow:hidden;
background-color: orange;
width:300px;
display:flex;
flex-flow:row;
justify-content:flex-start;
}
#colLeft {
height: 48px;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
#colRight {
order:2;
background-color: #c3d0ff;
height: 48px;
float: right;
}
and here is a guide to flex-box

Answer 2

set the width of your divs as auto like #colleft{width:auto;}
https://jsfiddle.net/3v5jtcck/3/