I am facing a challenge with my current code structure. Whenever I try to integrate a fixed solution for one problem, it causes a break in another part of the system. This leads me to believe that there may be some fundamental errors in my approach. Therefore, I am seeking your expertise to review and suggest either fixes or an entirely new solution for the task at hand.

My objective is to present flight information where each route is displayed similar to the image provided.

Currently, the display works fine; however, there are instances where the blue flight path gets interrupted when the outbound flight has more connections than the inbound flight. In such cases, the blue path remains on the same level as the second outbound flight. My goal is to ensure that the blue path goes all the way down, and the length of each inbound/outbound flight path is synchronized irrespective of the number of connections.

If possible, could you assist me in figuring out how to adjust either the architecture, solution, or CSS in order to draw a continuous blue line while maintaining equal lengths for inbound and outbound flights regardless of the number of connections?

Here is the Plunker code example for reference

https://i.sstatic.net/GJUsk.png

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>

CSS:

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

.align-bottom {  
  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;
}