角度/引导css对齐问题

我正在使用引导网格系统和angular

ng repeat

显示飞行路线信息

它按预期工作，但在某些情况下，当出站航班比入站航班有更多连接时，飞行路径（蓝线）会中断，并与出站航班中的第二个航班保持同一水平。我希望在当前场景中，线路一直向下，并且每个入站/出站飞行路径长度保持同步并相互关联

HTML:

    <div class="roundtrip">
        <div class="col-md-6">Outbound

            <div class="trip" ng-repeat="departureFlight in ticket.route.departureFlights">

                <div class="flight align-bottom">
                    <div class="date-time col-md-offset-2 col-md-3">
                        <div class="flight-time">{{departureFlight.departureTime | date:"h:mma"}}</div>
                        <div class="flight-date">{{departureFlight.departureTime | date:"EEE, MMM d, y"}}</div>
                    </div>
                    <div class="col-md-offset-0 col-md-2">{{departureFlight.cityFrom}} ({{departureFlight.flyFrom}})</div>
                </div>


                <div class="flight-path">
                    <div class="flight-path">
                        <div class="flight-duration">{{departureFlight.arrivalTime-departureFlight.departureTime | date:"h:mm"}}hr</div>
                    </div>
                </div>

                <div class="flight align-bottom">
                    <div class="date-time col-md-offset-2 col-md-3">
                        <div class="flight-time">{{departureFlight.arrivalTime | date:"h:mma"}}</div>
                        <div class="flight-date">{{departureFlight.arrivalTime | date:"EEE, MMM d, y"}}</div>
                    </div>
                    <div class="col-md-offset-0 col-md-2">{{departureFlight.cityTo}} ({{departureFlight.flyTo}})</div>
                </div>

                <div class="connection" ng-if="departureFlight.transferFlight">
                   {{departureFlight.arrivalTime | date:"h:mm"}}hr wait
                </div>

            </div>

        </div>
        <div class="col-md-6">Inbound

            <div class="trip" ng-repeat="returnFlight in ticket.route.returnFlights">

                <div class="flight align-bottom">
                    <div class="date-time col-md-offset-2 col-md-3">
                        <div class="flight-time">{{returnFlight.departureTime | date:"h:mma"}}</div>
                        <div class="flight-date">{{returnFlight.departureTime | date:"EEE, MMM d, y"}}</div>
                    </div>
                    <div class="col-md-offset-0 col-md-2">{{returnFlight.cityFrom}} ({{returnFlight.flyFrom}})</div>
                </div>


                <div class="flight-path">
                    <div class="flight-path">
                        <div class="flight-duration">{{returnFlight.arrivalTime-returnFlight.departureTime | date:"h:mm"}}hr</div>
                    </div>
                </div>

                <div class="flight align-bottom">
                    <div class="date-time col-md-offset-2 col-md-3">
                        <div class="flight-time">{{returnFlight.arrivalTime | date:"h:mma"}}</div>
                        <div class="flight-date">{{returnFlight.arrivalTime | date:"EEE, MMM d, y"}}</div>
                    </div>
                    <div class="col-md-offset-0 col-md-2">{{returnFlight.cityTo}} ({{returnFlight.flyTo}})</div>
                </div>

                <div class="connection" ng-if="returnFlight.transferFlight">
                    {{returnFlight.arrivalTime | date:"h:mm"}}hr wait
                </div>
            </div>
        </div>
    </div>

.searchResult {
  padding-left: 15px;
  padding-right: 15px;
  padding-top: 0px;
  padding-bottom: 0px;
}

.align-bottom {  /*added*/
  display: flex;
  align-items: flex-end;
}
.roundtrip {
  width: 100%;
  display: inline-flex;
  flex-direction: row;
  align-items: stretch;
}
.trip {
  //width: 100px;
  text-align: center;
  display: flex;
  flex-direction: column;
}
.flight {
  white-space: nowrap;
}
.date-time {
  text-align: center;
}
.flight-path {
  position: relative;
  width: 6px;
  min-height: 135px;
  flex-grow: 1;
  align-self: center;
  background-color: #6090FF;
}

.flight-duration {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  white-space: nowrap;
  background: rgba(255, 255, 255, .75);
  text-align: center;
  left:-15px;
}

.connection {
  height: 40px;
  align-self: center;
  width: 70px;
  color: red;
  border: 1px solid red;
  display: flex;
  flex-direction: column;
  justify-content: center;
}