How to inline-flex text in last element, but wrap only overflowing text, not whole element

Question

I'm trying to configure a table row to wrap owerflowing text and see next: enter image description here

My first cell html code is next:

<td class="x-grid-cell x-grid-td x-grid-cell-gridcolumn-1096 x-grid-cell-first" style="width: 617px;" role="gridcell" tabindex="-1" data-columnid="gridcolumn-1096">
    <div class="x-grid-cell-inner " style="text-align:left;">
        <div class="biz-list-item-glossary">
            <a class="listName" href="#link" data-id="" data-name="Account Amount Available" data-qtip="Dimension" data-tabindex-value="none" tabindex="-1" data-tabindex-counter="1">
            <img src="iconpath" class="listIcon"> Account Amount Available</a>
            <span style="font-size: 11px; color: #999999;">&nbsp;from&nbsp;</span>
            <span class="biz-context">
                <a class="" href="#link" data-id="162343_1" style="white-space: nowrap; font-weight:normal" data-qtip="Tableau Workbook" data-tabindex-value="none" tabindex="-1" data-tabindex-counter="1">Finance1</a>
                <img class="biz-context-arrow" src="images/breadcrumb_arrow.svg" style="width: 4px; height: 7px;">
                <a class="" href="#link" data-id="162343_99" style="white-space: nowrap; font-weight:normal" data-qtip="Data Source" data-tabindex-value="none" tabindex="-1" data-tabindex-counter="1">Customer_PO_Invoice_Item_FACT__Finance_Dimensional_DW_</a>
                <img class="biz-context-arrow" src="images/breadcrumb_arrow.svg" style="width: 4px; height: 7px;">
                <a class="" href="#link" data-id="162343_256" style="white-space: nowrap;font-weight:normal;/* width: 50px; */" data-qtip="Dimension Table" data-tabindex-value="none" tabindex="-1" data-tabindex-counter="1">GL Account</a>
            </span>
        </div>
    </div>
</td>

css:

.biz-list-item-glossary {
    color: #333;
    overflow: hidden;
    text-overflow: ellipsis;
    padding-top: 2px;
    padding-bottom: 2px;
}

.biz-context {
        display: inline-flex;
        flex-direction: row;
        flex-wrap: nowrap;
        align-items: center;
        font-family: 'PT Sans', arial, verdana, sans-serif;
        font-size: 12px;
        color: #6892b7;
        padding-top: 2px;
        padding-bottom: 2px;
}

.biz-context a {
    text-decoration: none;
    color: #6892b7;
    min-width: 0;
}

As a result I wanna se something like:

enter image description here

Is it possible to do?

See a in description