Синхронные смещения слоев внутри соседних контейнеров на чистом css

Question

Есть верстка:

.container {
  display: flex;
  width: 500px
}

.item {
  display: flex;
  width: 50%;
  flex-direction: column;
  background: yellow;
  border: green 1px solid;
}

.container a {
  display: block
}

<div class="container">

  <div class="item">

    <h3>Заголовок<br>1<br>1<br>1</h3>

    <div><a href="">Иван Петров</a></div>

  </div>

  <div class="item">

    <h3>Заголовок</h3>

    <div>
      <a href="">Иван Петров</a>
      <a href="">Иван Иванов</a>
    </div>

  </div>

</div>

Ниже картинка, которая показывает что я хочу добиться.

Мне необходимо, чтобы при увеличении высоты заголовка в одном из контейнеров (и как следствие, смещение его автора ниже), авторы, которые находятся в соседних контейнерах были на одном уровне с этим самым низким по расположению автором. Т.е. все авторы в соседних контейнерах должны равняться на уровень самого низкого. При этом, если самый "низкий" автор - двойной (тройной), то остальные авторы находятся на одном уровне с первым в списке. Как это реализовать на чистом css? grid? куда копать не могу никак разобраться. Можно разбить конечно на строки таблицы, но тогда не получится законченная текстовая целостность контентного блока, все данные будут разнесены по разным строкам таблицы, чего не хочется

UPDATE

вот такое решение я смог сотворить, но если небольшое "но" - при попытке переноса двух последних контейнеров под первый и второй (изменение ширины браузера, применяется новый @media запрос) все сбивается в кучу - получается каша

.container
{display: flex; width: 800px; flex-wrap: nowrap}

.container .item
{display: flex; width: 25%; max-width: 25%; flex-direction: column; position: relative}

.container h3
{background: gray; margin: 0; padding: 0; flex-grow: 1;}

.container .bottom
{position: absolute; bottom: -1px; left: 0; height: 1px; width: 100%}

.container .meta
{background: #ed91ee; min-height: 60px; width: 100%}

.container a
{display: block}

<div class="container">


    <div class="item">
        <h3>
            Заголовок 1
        </h3>
        <div class="bottom">
            <div class="meta">
                <a href="">Иван Петров1</a>
            </div>
        </div>
    </div>

    <div class="item">
        <h3>
            Заголовок 2<br>2<br />2<br />2<br />2<br />
        </h3>

        <div class="bottom">
            <div class="meta">
                <a href="">Иван Петров2</a>
                <a href="">Иван Петров2</a>
                <a href="">Иван Петров2</a>
                <a href="">Иван Петров2</a>
                <a href="">Иван Петров2</a>
            </div>
        </div>
    </div>
    
    <div class="item">
        <h3>
            Заголовок 3
        </h3>
        <div class="bottom">
            <div class="meta">
                <a href="">Иван Петров3</a>
            </div>
        </div>
    </div>

    <div class="item">
        <h3>
            Заголовок 4
        </h3>
        <div class="bottom">
            <div class="meta">
                <a href="">Иван Петров4</a>
            </div>
        </div>
    </div>

</div>

Answer 1

Вы так хотели?

*, *::before, *::after {
  box-sizing: border-box;
}

.container {
  max-width: 1000px;
  margin: 0 auto;
  padding: 0 10px;
}

.wrapper__items {
  max-width: 400px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
}

.item {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 10px;
  border: 1px solid grey;
}

.item:not(:last-child) {
  border-bottom: none;
}

<div class="container">

  <div class="wrapper__items">

    <div class="item">
      <h2>Произведение</h2>
      <h2>Автор</h2>
    </div>

    <div class="item">
      <p>Просто делай, делай просто!</p>
      <p>Оскар Хартман</p>
    </div>

    <div class="item">
      <p>Богатый папа, бедный папа</p>
      <p>Роберт Кийосаки</p>
    </div>

    <div class="item">
      <p>Жизнь без целей</p>
      <p>Стивен Шепира</p>
    </div>

    <div class="item">
      <p>Алхимик</p>
      <p>Пауло Коэльо</p>
    </div>

  </div>

</div>

Answer 2

.container {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-gap: 10px;
  width: 100%;
}

.container .item-wrap {
  display: block;
  width: 100%;
  border: 1px solid gray;
}

.container .item {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: flex-start;
  width: 100%;
  height: 100%;
}

<div class="container">
  <div class="item-wrap">
    <div class="item">
      <h3>Заголовок<br>1<br>1<br>1</h3>
      <div><a href="">Иван Петров</a></div>
    </div>
  </div>

  <div class="item-wrap">
    <div class="item">
      <h3>Заголовок</h3>
      <div>
        <a href="">Иван Петров</a>
        <a href="">Иван Иванов</a>
      </div>
    </div>
  </div>
</div>

Answer 3

Разметку не менял (хотя стоило бы 2 элемента выкинуть):

.container {
  display: grid;
  grid-template: auto auto / 1fr auto 1fr;
  grid-auto-flow: column;
  width: 500px;
  border: 1px solid green;
  background: yellow;
  /* grid-column-gap: 1px; */
}

.item {
  display: contents;
}

.container::before {
  content: "";
  border-left: inherit;
  grid-column: 2;
  grid-row: 1 / span 2;
}

.container a {
  display: block
}

<div class="container">

  <div class="item">

    <h3>Заголовок<br>1<br>1<br>1</h3>

    <div><a href="">Иван Петров</a></div>

  </div>

  <div class="item">

    <h3>Заголовок</h3>

    <div>
      <a href="">Иван Петров</a>
      <a href="">Иван Иванов</a>
    </div>

  </div>

</div>

БЛОГ НА HUSL

Синхронные смещения слоев внутри соседних контейнеров на чистом css

Ответы (3 шт):