Q:

Html & Css Table Cell Width Issue how to show Icon always on the right side?

I have a Table with 3 Table-Cells. 
The first one should represent a Profile Picture, the second one should represent a title (text) and the third one should represent a button with a flag icon in it. 
How it should be:

How it is at the moment: 

As you can see the middle cell resizes its width automatically.
Thats the Problem because no matter how long the text in the middle is it should always fit/fill the screen. The Left and Right ones should always have the same fixed width.
What I have tried already:
<div class="table">
 <div class="tablecellleft">
  ........here is the img
 </div>
 <div class="tablecellmiddle">
  ..... here is the text
 <div>
 <div class="tablecellright">
 ...... button with icon
 </div>
</div>

css:
.table{
 display: table;
}
.tablecellleft{
 display: table-cell;
 min-width: 17vw;
 max-width: 17vw;
}
.tablecellmiddle{
 display: table-cell;
 vertical-align: top;
 //No width because it should fill
}
.tablecellright{
 display: table-cell;
 min-width: 17vw;
 max-width: 17vw;
}

A:

Use calc and subtract what width you have given to left and right section by 100%;
width: calc(100% - 34vw);

var fees = ['$0.9 + $.1', '$20 + $2', '$5 + $0.5', '$0 + $0.01', '$100 + $9', '$1 + $1', '$2 + $0.5'];
.table{
 display: table;
width: 100%;
}
.tablecellleft{
 display: table-cell;
 width: 17vw;
}
.tablecellmiddle{
 display: table-cell;
 vertical-align: top;
 width: calc(100% - 34vw);
 //No width because it should fill
}
.tablecellright{
 display: table-cell;
 width: 17vw;
text-align: right;
}
 <div class="table">
 <div class="tablecellleft">
  ........here is the img
 </div>
 <div class="tablecellmiddle">
  ..... here is the text
 </div>
 <div class="tablecellright">
 ...... button with icon
 </div>
</div>

