colspan-like flexbox table in IE 10 and 11

Question

I'm having IE-related problems with responsive flexbox table that looks like regular <table> (purple heads, pink multiline content cells) with colspans (yellow multiline content cells) on desktop:

And the table switches to head/cell representation on mobile:

Flexbox was used here because heads should alternate with content cells in order to be displayed in correct order on mobile AND multiline cell heights should match within a single row. Cell widths are supposed to vary too but they can be considered fixed if it helps with anything else.

The restrictions here are that table contents should be as DRY as possible (heads are allowed to be duplicated for responsiveness but content cells aren't), and it should look acceptable in IE 10 (expendable) and 11.

And Internet Explorer 11 is a major obstacle here, cell heights are collapsing:

Here is a plunk.

HTML markup:

<div class="items hide-on-mobile">
  <div class="item">
    <p class="head">One one</p>
  </div>
  <div class="item">
    <p class="head">Two</p>
  </div>
  <div class="item">
    <p class="head">Three</p>
  </div>
  <div class="item">
    <p class="head">Four</p>
  </div>
</div>
<div class="items hide-head-on-desktop">
  <div class="item">
    <p class="head">One one</p>
    <p class="content">1</p>
  </div>
  <div class="item">
    <p class="head">Two</p>
    <p class="content">2</p>
  </div>
  <div class="item">
    <p class="head">Three</p>
    <p class="content">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris sit amet metus eget purus ultrices lobortis et ut metus. Aliquam erat volutpat. Duis at dui in metus laoreet fringilla pharetra sit amet augue. Morbi sit amet ex vulputate ex interdum auctor. Etiam in purus vitae augue mollis imperdiet et eget purus.</p>
  </div>
  <div class="item">
    <p class="head">Four</p>
    <p class="content">4</p>
  </div>
</div>
<div class="colspan-item">Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Sed maximus efficitur mi vel rhoncus.</div>
<div class="items hide-head-on-desktop">
  <div class="item">
    <p class="head">One one</p>
    <p class="content">1</p>
  </div>
  <div class="item">
    <p class="head">Two</p>
    <p class="content">2</p>
  </div>
  <div class="item">
    <p class="head">Three</p>
    <p class="content">Integer viverra ante ipsum, suscipit ultricies dolor auctor eget.</p>
  </div>
  <div class="item">
    <p class="head">Four</p>
    <p class="content">4</p>
  </div>
</div>
<div class="colspan-item">Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Vivamus molestie molestie ligula in condimentum. Fusce fermentum, lectus quis efficitur luctus, erat enim blandit augue, id tincidunt odio arcu ac libero. Mauris diam est, pulvinar eget venenatis non, pellentesque in sem. Integer mattis mattis lorem, id volutpat enim feugiat ut. </div>

And a stylesheet (autoprefix prefixes are omitted for brevity):

.items {
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: stretch;
}

@media (max-width: 767px) {
  .items {
    display: block;
  }

  .items.hide-on-mobile {
    display: none !important;
  }
}

@media (min-width: 768px) {
  .items.hide-head-on-desktop .head {
    max-height: 0;
    overflow: hidden;
    padding-bottom: 0;
    padding-top: 0;
  }
}

.item {
  flex-grow: 1;
  display: flex;
  flex-direction: column;
  text-align: center;
}

.item {
  overflow: hidden;
}

.item:not(:last-child) {
  margin-right: 10px;
}

.item:nth-child(1) {
  flex: 0 0 6em;
}

.item:nth-child(2) {
  flex: 0 0 4em;
}

.item:nth-child(3) {
  flex: 1 0;
}
.item:nth-child(4) {
  flex: 0 0 5em;
}

.item .head {
  display: flex;
  flex: 1;
  justify-content: center;
  flex-direction: column;
  margin-bottom: 5px;
  padding: 10px;
  background-color: #aaf;
  font-weight: bold;
}

.item .content {
  display: flex;
  flex: 1;
  justify-content: center;
  flex-direction: column;
  padding: 10px;
  background-color: #faf;
}

I've already tried to apply postcss-flexbugs-fixes and flexibility, but they didn't have any positive effect.

I'm very aware that IE flexbox implementation is flawed but found no suitable workarounds for my case.

I'm after pure HTML/CSS solution, but any JavaScript fix may be acceptable too (as long as it is compatible with React SPA), considering how bad the things are.

How can this be fixed and what are my possible options here?