max-height Transition держать дочерний элемент всегда внизу родителя

Question

Я борюсь с довольно легкой проблемой. Секции меняют свою максимальную высоту при наведении. статья небольшого промежутка article__tag всегда должна располагаться внизу своего родителя (зеленая линия) независимо от того, насколько сильно будет расти строка, и будет ли она использовать анимацию замедления и задержку.

Вот что у меня есть:

section{
  background: #000;
  color: #fff;
  display: flex;
  max-height: 150px;
  border-bottom: 1px solid lightgreen;
  transition: max-height .5s ease-in-out;
  position: relative;
  overflow: hidden;
}


section:hover {
  max-height: 400px;
  transition-delay: .3s;
}

article {
  flex:1;
  height: 200px
}

.article__tag {
  background: white;
  color: #000;
  position: absolute;
  padding: 10px;
  top: 120px;
  transition: all .5s ease-in-out;
  transition-delay: .3s;
}

section:hover .article__tag {
  bottom: 0;
  top: inherit;
}

<section>
  <article>A</article>
  <article><span class="article__tag">tag</span></article>
</section>
<section>
  <article>B</article>
  <article><span class="article__tag">tag</span></article>
</section>

https://codepen.io/t-book/pen/LYpjVPz

Моя проблема в том, что при отпускании мыши белая метка быстро поднимается вверх. Кроме того, я определил его верхнюю часть с помощью 165px значения, которое я не могу предвидеть, поскольку строки имеют различное содержимое.

Как я могу расположить метку всегда на текущем дне максимальной высоты?

Answer 1

Всегда держать article_tag внизу:

section{
  background: #000;
  color: #fff;
  display: flex;
  max-height: 150px;
  border-bottom: 1px solid lightgreen;
  transition: max-height .5s ease-in-out;
  position: relative;
  overflow: hidden;
}


section:hover {
  max-height: 400px;
  transition-delay: .3s;
}

article {
  flex:1;
  height: 200px
}

.article__tag {
  background: white;
  color: #000;
  position: absolute;
  padding: 10px;
  bottom: 0px;
  transition: all .5s ease-in-out;
  transition-delay: .3s;
}

<section>
  <article>A</article>
  <article><span class="article__tag">tag</span></article>
</section>
<section>
  <article>B</article>
  <article><span class="article__tag">tag</span></article>
</section>