Is there any way to vertically center contents of a cell in a display:table-row?

Question

I thought it would be easy, yet I can't seem to do this...

I would like to stick to display:table since the answer to another question of mine suggested this to solve the problem I outlined there and it does solve that problem. But apparently, solving one problem ought to create another...

This is what I have now:

.table {
  display: table;
  border-collapse: separate;
  border-spacing: 10px;
}

.row {
  display: table-row;
}

.cell {
  display: table-cell;
}

.center {
  /*What to put here??*/
}

<div class="table">
  <div class="row">
    <div class="cell">
      <div class="center">
        Be vert centered
      </div>
    </div>
    <div class="cell">
      Lorem ipsum dolor sit amet neque ante ipsum dolor in faucibus lectus feugiat sagittis vel, adipiscing gravida pulvinar felis, malesuada velit nulla sem vel wisi. Suspendisse fermentum, dui odio et netus et magnis dis parturient montes, nascetur ridiculus mus. Donec consectetuer adipiscing urna. Aliquam interdum ligula eleifend viverra. Mauris viverra justo.
    </div>
  </div>
</div>

As you can see, I have a row with two cells. The cell to the right is expected to be substantially taller than the cell to the left. For this reason, for aesthetic reasons I would like to have the contents of the cell to the left to be vertically centered: to appear not in the top of the row, as happens now, but in the middle of it. Is there any way to do this?

Failed attempts:

1. position:absolute + manual placement at 50%

As you can see, screws layout.

.table {
  display: table;
  border-collapse: separate;
  border-spacing: 10px;
}

.row {
  display: table-row;
}

.cell {
  display: table-cell;
}

.center {
  position:absolute;
  top:50%;
  transform: translateY(-50%);
}

<div class="table">
  <div class="row">
    <div class="cell" style="position:relative;">
      <div class="center">
        Be vert centered
      </div>
    </div>
    <div class="cell">
      Lorem ipsum dolor sit amet neque ante ipsum dolor in faucibus lectus feugiat sagittis vel, adipiscing gravida pulvinar felis, malesuada velit nulla sem vel wisi. Suspendisse fermentum, dui odio et netus et magnis dis parturient montes, nascetur ridiculus mus. Donec consectetuer adipiscing urna. Aliquam interdum ligula eleifend viverra. Mauris viverra justo.
    </div>
  </div>
</div>

2. Flexbox

OK this requires setting display:flex so I have to add another wrapping div since an element cannot be both display:table-cell and flex.

As you can see, flatly doesn't work. centerwrapper refuses to have height of 100% of its parent - its parent may have height of the whole table row, but centerwrapper nonetheless only has height of its own content. And that's in spite of height: 100% which is being ignored. (added borders to visualise this)

.table {
  display: table;
  border-collapse: separate;
  border-spacing: 10px;
}

.row {
  display: table-row;
}

.cell {
  display: table-cell;
}

.centerwrapper {
  display: flex;
  height: 100%;
  flex-direction: column;
  justify-content: center;
}

<div class="table">
  <div class="row">
    <div class="cell" style="border: 1px solid black;">
      <div class="centerwrapper" style="border: 1px solid red;">
        <div class="center">
          Be vert centered
        </div>
      </div>
    </div>
    <div class="cell">
      Lorem ipsum dolor sit amet neque ante ipsum dolor in faucibus lectus feugiat sagittis vel, adipiscing gravida pulvinar felis, malesuada velit nulla sem vel wisi. Suspendisse fermentum, dui odio et netus et magnis dis parturient montes, nascetur ridiculus mus. Donec consectetuer adipiscing urna. Aliquam interdum ligula eleifend viverra. Mauris viverra justo.
    </div>
  </div>
</div>

2.1 Fun observation

Changing height: 100% to height: 150px screws layout. I have no idea why.

.table {
  display: table;
  border-collapse: separate;
  border-spacing: 10px;
}

.row {
  display: table-row;
}

.cell {
  display: table-cell;
}

.centerwrapper {
  display: flex;
  height: 150px;
  flex-direction: column;
  justify-content: center;
}

<div class="table">
  <div class="row">
    <div class="cell" style="border: 1px solid black;">
      <div class="centerwrapper" style="border: 1px solid red;">
        <div class="center">
          Be vert centered
        </div>
      </div>
    </div>
    <div class="cell">
      Lorem ipsum dolor sit amet neque ante ipsum dolor in faucibus lectus feugiat sagittis vel, adipiscing gravida pulvinar felis, malesuada velit nulla sem vel wisi. Suspendisse fermentum, dui odio et netus et magnis dis parturient montes, nascetur ridiculus mus. Donec consectetuer adipiscing urna. Aliquam interdum ligula eleifend viverra. Mauris viverra justo.
    </div>
  </div>
</div>