HTML CSS automatically adjust height - html

Question

I am trying to display outbound and inbound flight by visualising it using CSS/LESS. The problem is that when Outbound flight has more airport changes then Inbound then line stays at the level of first flight. I want line adjust height dynamically based on the longest route.
Could you please help me to figure out how do achieve required results?
UPDATE: Prepared Plunker example (make a screen wider in order to see it properly)
This is what I've got:
This is what I am trying achive:
LESS:
.time-slice {
position: relative;
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
-webkit-box-align: stretch;
-webkit-align-items: stretch;
-ms-flex-align: stretch;
align-items: stretch;
margin-left: 20px;
}
.time-slice > * {
padding: 20px;
}
.circle {
width: 16px;
height: 16px;
box-sizing: content-box;
border-color: #29a8bb;
background: #ffffff;
border-radius: 32px;
display: block;
border: 2px solid blue;
}
.circle-wrap {
position: absolute;
top: 0px;
left: 91px;
z-index: 2;
}
.circle-wrap > .circle {
position: relative;
left: 20px;
}
.date-time {
box-sizing: content-box;
-webkit-flex-shrink: 0;
-ms-flex-negative: 0;
flex-shrink: 0;
-webkit-flex-basis: 100px;
-ms-flex-preferred-size: 100px;
flex-basis: 100px;
text-align: center;
margin-top: -5px;
}
.date,
.time {
max-width: 90px;
color: #999999;
font-size: 13px;
margin-top: 0px;
margin-bottom: 10px;
margin-left: 20px;
}
.time-slice.row:not(:last-child) .point-title {
border-left: 2px solid blue;
padding-left: 15px;
padding-top: 0;
position: relative;
top: 20px;
}
.duration {
margin-left: 50px;
max-width: 90px;
color: #999999;
font-size: 13px;
margin-bottom: 10px;
}
.stop-transit {
border-width: 2px;
color: red;
padding-left: 5px;
margin-left: 20px;
margin-bottom: 10px;
table-layout: fixed;
}
.stop-transit, .transit-path, .wait-time{
padding-right: 10px;
padding-left: 20px;
}
.transit-path {
border-right-style:dotted;
width: 140px;
}
.wait-reason{
text-align: center;
}
.searchResult{
padding: 0px 15px;
}
HTML:
<div id="{{ticket.id}}" style="display:none">
<div class="col-md-6 line">
<h3>OUTBOUND</h3>
<div ng-repeat="departureFlight in ticket.route.departureFlights">
<div class="timeline">
<div class="time-slice row">
<div class="date-time">
<p class="date">{{departureFlight.departureTime | date:"EEE d MMM"}}</p>
<p class="time">{{departureFlight.departureTime | date:"h:mma"}}</p>
</div>
<div class="circle-wrap">
<div class="circle"></div>
</div>
<div class="point-title">
<span>
<b>{{departureFlight.cityFrom}} ({{departureFlight.flyFrom}})</b>
</span>
</div>
</div>
<div class="time-slice row">
<div class="date-time">
<p class="time duration">{{departureFlight.arrivalTime-departureFlight.departureTime | date:"h:mm"}}h</p>
</div>
<div class="point-title">
</div>
</div>
<div class="time-slice row">
<div class="date-time">
<p class="date">{{departureFlight.arrivalTime | date:"EEE d MMM"}}</p>
<p class="time">{{departureFlight.arrivalTime | date:"h:mma"}}</p>
</div>
<div class="circle-wrap">
<div class="circle"></div>
</div>
<div class="point-title">
<span>
<b>{{departureFlight.cityTo}} ({{departureFlight.flyTo}})</b>
</span>
</div>
</div>
</div>
<div ng-if="departureFlight.transferFlight">
<table class="stop-transit">
<tr>
<td class="transit-path">
<div class="wait-reason">Connection change<br>
Long wait <span class="glyphicons glyphicons-airplane">✈</span></div>
</td>
<td class="wait-time">{{departureFlight.departureTime | date:"h:mm"}} hours</td>
</tr>
</table>
</div>
</div>
</div>
<div class="col-md-6">
<h3>INBOUND</h3>
<div ng-repeat="returnFlight in ticket.route.returnFlights">
<div class="timeline">
<div class="time-slice row">
<div class="date-time">
<p class="date">{{returnFlight.departureTime | date:"EEE d MMM"}}</p>
<p class="time">{{returnFlight.departureTime | date:"h:mma"}}</p>
</div>
<div class="circle-wrap">
<div class="circle"></div>
</div>
<div class="point-title">
<span>
<b>{{returnFlight.cityFrom}} ({{returnFlight.flyFrom}})</b>
</span>
</div>
</div>
<div class="time-slice row">
<div class="date-time">
<p class="time duration">{{returnFlight.arrivalTime-returnFlight.departureTime | date:"h:mm"}}h</p>
</div>
<div class="point-title">
</div>
</div>
<div class="time-slice row">
<div class="date-time">
<p class="date">{{returnFlight.arrivalTime | date:"EEE d MMM"}}</p>
<p class="time">{{returnFlight.arrivalTime | date:"h:mma"}}</p>
</div>
<div class="circle-wrap">
<div class="circle"></div>
</div>
<div class="point-title">
<span>
<b>{{returnFlight.cityTo}} ({{returnFlight.flyTo}})</b>
</span>
</div>
</div>
</div>
<div ng-if="returnFlight.transferFlight">
<table class="stop-transit">
<tr>
<td class="transit-path">
<div class="wait-reason">Connection change<br>
Long wait <span class="glyphicons glyphicons-airplane">✈</span></div>
</td>
<td class="wait-time">{{returnFlight.departureTime | date:"h:mm"}} hours</td>
</tr>
</table>
</div>
</div>
</div>
</div>

Answer 1

That just screams flexbox. Support level is already at 94.82%. You will need to use all those ugly prefixes, but you can help yourself with STYLUS/LESS and the rest of 'em.
Here's a quick outline of what you might end up with:
.roundtrip {
display: inline-flex;
flex-direction: row;
align-items: stretch;
background-color: #909090;
}
.trip {
width: 100px;
text-align: center;
border: 1px solid black;
margin: 0px 3px;
display: flex;
flex-direction: column;
}
.flight {
background-color: #B0B0B0;
white-space: nowrap;
}
.flight-path {
width: 6px;
min-height: 15px;
flex-grow: 1;
align-self: center;
background-color: #6090FF;
}
.connection {
height: 40px;
color: red;
border: 1px solid red;
display: flex;
flex-direction: column;
justify-content: center;
}
<span class="roundtrip">
<div class="trip">Outbound
<div class="flight">Los Angeles</div>
<div class="flight-path"></div>
<div class="flight">Chicago</div>
<div class="connection">5hr wait</div>
<div class="flight">Chicago</div>
<div class="flight-path"></div>
<div class="flight">New York</div>
<div class="connection">2hr wait</div>
<div class="flight">New York</div>
<div class="flight-path"></div>
<div class="flight">Amsterdam</div>
</div>
<div class="trip">Inbound
<div class="flight">Amsterdam</div>
<div class="flight-path"></div>
<div class="flight">Los Angeles</div>
</div>
</span>