RESPOSIVE FLEXIBLE TOOLBAR

by Peter Aad

HTML

<!-- RESPOSIVE FLEXIBLE TOOLBAR -->

<div class="bar">
    <div class="col col-a">
        <div class="inner">
            COLUMN A  COLUMN A
        </div><!-- /end .inner -->		
	</div><!-- /end .col -->	
	<div class="col col-b">
	    <div class="inner">
		        COLUMN B
		</div><!-- /end .inner -->	
	</div><!-- /end .col -->	
</div>

CSS

.bar {
    display: table;
    width:100%;
       
}
.col {
    width: auto;
    vertical-align: top;
    display:table-cell;
}
.inner {
    width: auto;
            white-space: nowrap;
         overflow: hidden;
  text-overflow: ellipsis;
}
.col-a {
    background:pink;
}
.col-b {
    background:yellow;
}
.col-a .inner {
   
    background:blue;  

}
.col-b .inner {
    background:red;
}