根据父项的其他内容影响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更改为

FIN-985_the_original

和.line到

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