How to keep all columns in a single ion-row in Ionic >= 2

I have a page in my Ionic 2 application where I what a gird of items, where each item takes a single row.

A simplified example can be seen at this plkr

Looking at the first row, I have 3 columns (red, gray, and orange).

I want the first two columns to stay fixed width, and have the last column take up the rest of the row. If the text is too long, I just want it to truncate and show ellipsis (which I do using the style='white-space: nowrap; overflow: hidden;text-overflow: ellipsis

Now, if I shrink the width of the page, the last column moved to be under the other rows....

Is there a way to have this third column stay in the same row, and just show the ellipsis once it runs out of room there (ie like below...)? I have tried everything!

Try with this solution:

Apply following class to last column:

 .last-col{
        width: 1%;
 }

Reasoning: here we are overriding .col class's width which is specified to be 100 % by the framework and because of this overriding Third col initially gets 1% width of its container and then there comes magic(i.e flex-grow: 1) attribute from the .col class which does all the trick.

flex-grow definition: It tells what amount of the available space (now we have available space because we have only specified/used 4px+ 30px+ 1% ) inside the flex container the item should take up.

.col {
    position: relative;
    padding: 5px;
    width: 100%; // we are overriding this field
    margin: 0;
    min-height: 1px;
    flex-basis: 0;
    flex-grow: 1;
    max-width: 100%;
}