Влияет на абсолютную высоту div на основе другого содержимого родителя

Question

Я вижу много вопросов о том, как заставить абсолютно позиционированного ребенка влиять на рост родительского div, но я не уверен, как поступить наоборот. У меня есть абсолютно позиционированный дочерний элемент, и я хочу, чтобы его высота зависела от другого содержимого его родителя.

HTML:

<div class="timeline">

  <div class="line"></div>

  <div class="item">
    <h1 class="date">January 1, 2017</h1>
    <h1 class="info">Info</h1>
  </div>

</div>

CSS:

.timeline {
    width: 100%;
    margin-top: 65px;
    border: thick orange solid;
}

.line {
    position: absolute;
    width: 5px;
    height: 100%;
    background-color: #a2ff94;
    left: 50%;
    transform: translate(-50%, 0);
}

.item {
    width: 50%;
    border: thin red solid;
}

JSFiddle link

Answer 1

Измените .timeline на

.timeline {
    width: 100%;
    margin-top: 65px;
    border: thick orange solid;
    position: relative;
}

и .line на

.line {
    position: absolute;
    top: 0;
    bottom: 0;
    width: 5px;
    background-color: #a2ff94;
    left: 50%;
    transform: translate(-50%, 0);
}