Адаптивная таблица с HTML-тегами в ячейках

let mediaQueryList = window.matchMedia("(max-width: 1000px), screen and (orientation: portrait)");

function fResizeCells(selector = "body", type = "reset") {
  let arr = [...document.querySelectorAll(selector)];
  let aRow = [...document.querySelectorAll(".good")];
  switch (type) {
    case "max":
      let nMax = Math.max(...arr.map((el) => el.clientWidth));
      arr.forEach((el) => (el.style.minWidth = `${nMax}px`));
      break;
    case "col":
      let nCol = aRow[0].children.length;
      for (let i = 0; i < nCol; i++) {
        let m = Math.max(...aRow.map((oRow) => oRow.children[i].clientWidth));
        aRow.forEach((oRow) => (oRow.children[i].style.minWidth = oRow.children[i].style.minWidth = `${m}px`));
      }
      break;
    default:
      arr.forEach((el) => (el.style.minWidth = el.style.maxWidth = ``));
      break;
  }
}

function screenTest(ev) {
  if (ev.matches) {
    fResizeCells(".char"); fResizeCells(".title", "max");
  } else {
    fResizeCells(".title"); fResizeCells(".char", "col");
  }
}
mediaQueryList.addListener(screenTest);
screenTest(mediaQueryList);

body { margin: 0; }

.table {
  margin: 0 auto;
  display: flex;
  flex-flow: column nowrap;
  padding: 5px;
  background-color: #f3efd6;
  color: #758e8b;
  font-family: sans-serif;
}

.good {
  display: flex;
  flex-flow: row nowrap;
  background-image: linear-gradient(#0002, #0000 10%, #0001 90%);
  box-shadow: 0 0 0 1px #758e8b;
}
.good:not(:last-child) { margin-bottom: 5px; }

.char {
  display: flex;
  flex-flow: column nowrap;
  box-shadow: inset 0 0 0 0px #758e8b;
}

.name {
  flex-basis: 50px;
  flex-grow: 2;
}

.author {
  flex-basis: 50px;
  flex-grow: 3;
}

.theme {
  flex-basis: 50px;
  flex-grow: 1;
}

.price-min {
  flex-basis: 50px;
  flex-grow: 2;
}

.title {
  display: flex;
  flex-flow: row nowrap;
  justify-content: center;
  align-items: center;
  padding: 0.5em;
  min-height: 2.5em;
  font-weight: bold;
  text-align: center;
  box-shadow: inset 0 0 0 1px #758e8b;
}

.cont {
  display: flex;
  flex-flow: row wrap;
  justify-content: start;
  align-items: center;
  padding: 0.5em;
  flex: 1;
  box-shadow: inset 0 0 0 1px #758e8b;
}
.author .cont {
  flex-flow: column nowrap;
  justify-content: center;
  align-items: start;
}

.good p { margin: 0; }

.im {
  font-family: Georgia, "Times New Roman", Times, serif;
  font-weight: bold;
  font-style: italic;
  color: #b78670;
}

.nw {
  white-space: nowrap;
  text-align: center;
}

img {
  display: block;
  width: 192px;
  height: 260px;
  object-fit: none;
  object-position: -303px -122px;
  box-shadow: 0 0 25px 0px #0007;
}

@media (max-width: 1000px),
screen and (orientation: portrait) {
  .good {
    display: flex;
    flex-flow: column nowrap;
  }
  .char {
    display: flex;
    flex-flow: row nowrap;
    box-shadow: inset 0 0 0 1px #758e8b;
  }
  .name, .author, .theme, .price-min {
    flex-basis: auto;
    flex-grow: 0;
  }
  .title {
    justify-content: start;
    align-items: start;
    min-height: max-content;
    box-shadow: inset 0 0 0 0px #758e8b;
  }
  .price-min .title {
    text-align: left;
  }
  .cont {
    box-shadow: inset 0 0 0 0px #758e8b;
  }
  .author .cont {
    flex-flow: column nowrap;
    align-items: start;
  }
}

<div class="table">
  <div class="good">
    <div class="char number">
      <div class="title">
        <p>No.</p>
      </div>
      <div class="cont">
        <p class="nw">1999999</p>
      </div>
    </div>
    <div class="char name">
      <div class="title">Название</div>
      <div class="cont im">Вымершие животные</div>
    </div>
    <div class="char cover">
      <div class="title">Обложка</div>
      <div class="cont"><img alt="обложка" src="https://i.imgur.com/Mrx1U0z.png"></div>
    </div>
    <div class="char author">
      <div class="title">Автор</div>
      <div class="cont im">Дмитрий Лукашанец</div>
    </div>
    <div class="char theme">
      <div class="title">Тематика</div>
      <div class="cont">Как динозавры так и остальные</div>
    </div>
    <div class="char version">
      <div class="title">Версия</div>
      <div class="cont">
        <p class="nw">B</p>
      </div>
    </div>
    <div class="char price-min">
      <div class="title">Минимальная<br>цена</div>
      <div class="cont im">
        <p class="nw">999 800,50 RUB</p>
      </div>
    </div>
  </div>
  <div class="good">
    <div class="char number">
      <div class="title">No.</div>
      <div class="cont">
        <p class="nw">1999999</p>
      </div>
    </div>
    <div class="char name">
      <div class="title">Название</div>
      <div class="cont im">Вымершие животные</div>
    </div>
    <div class="char cover">
      <div class="title">Обложка</div>
      <div class="cont"><img alt="обложка" src="https://i.imgur.com/Mrx1U0z.png"></div>
    </div>
    <div class="char author">
      <div class="title">Автор</div>
      <div class="cont im">
        <p><a href="https://ru.stackoverflow.com/">Kira — the greatest of all time, KiraText</a></p>
        <p><a href="https://stackoverflow.com/">Kira — the greatest of all time</a>, KiraText</p>
      </div>
    </div>
    <div class="char theme">
      <div class="title">Тематика</div>
      <div class="cont">Как динозавры так и остальные</div>
    </div>
    <div class="char version">
      <div class="title">Версия</div>
      <div class="cont">
        <p class="nw">B</p>
      </div>
    </div>
    <div class="char price-min">
      <div class="title">Минимальная<br>цена</div>
      <div class="cont im">
        <p class="nw">800</p>
      </div>
    </div>
  </div>
</div>