Position an element over a table-row element

Question

I have a list of .message whose display is table-row. Some of those messages should have a red triangle over them, at the bottom center. The element containing the triangle can't be inside a cell of the .message.

It's easy to do when the .message display is block but I can't seem to be able to do it with a table-row. As you can see in my fiddle, all the triangles are at the same wrong position and the second cell doesn't extend to the whole row (it does if I remove the .opener element).

What am I missing ?

Fiddle for the tests (and clarity)

Hover the left cells with your mouse to get why I want to have table-cell elements. To be more precise I need the whole range of positioning and dimension advantages of table-cell elements (same height for both cells, for example, and the right cell must fill the remaining space of the row).

Compatibility needed : Firefox and Chrome

Answer 1

You can get this layout with flexbox

FIDDLE

CSS

#b {
    width:100%;
    list-style: none;
}
.m {
    display: flex;
    align-items: center;
    align-content: center;
    position: relative;
    background: #789;
    border-top: thin solid #ccc;
}
.u {
    width: 100px;
    float:left;
    opacity:.999;
}
.u:before
{
    content: '';
    width: 100px;
    height: 100%;
    display: block;
    position: absolute;
    top:0;
    z-index:-1;
}
.c {
    overflow: hidden;
    width: calc(100% - 100px);
}

.u:hover:before, .c:hover {
    background: yellow;
}
.opener {
    width: 16px;
    text-align: center;
    cursor: pointer;
    color: red;

    left:0;right:0;
    bottom:0;
    margin: auto;
    z-index: 0;
    position: absolute;
}
.opener:before {
    content:'▼';
    display: block;
}