Bootstrap列拆分问题

Question

我想将OUTBOUND和INBOUND航班信息分成6个6分开的单独列。

当前HTML / LESS的想法是出站和入站div必须在height属性上相互尊重。例如，如果出境航班有两个连接，而入境航班是直达航班，则两者将保持相同的大小。

这就是目前的样子：

我想将Outbound和Inbound放在单独的bootstrap列（6x6）中，以保持入站和出站元素之间的距离。但遗憾的是它并不起作用。你能帮我弄明白我怎样才能做到这一点？当然，如果我想在不同的屏幕尺寸上使用它，我可以调整一个边距但是它是否可以使用它？

CodePen example

HTML：

<span class="roundtrip">
  <div class="trip col-md-6">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 col-md-6">Inbound
    <div class="flight">Amsterdam</div>
    <div class="flight-path"></div>
    <div class="flight">Los Angeles</div>
  </div>
</span>

LESS：

.roundtrip {
  display: inline-flex;
  flex-direction: row;
  align-items: stretch;
}

.trip {
  width: 100px;
  text-align: center;
  border: 1px solid black;
  margin: 0px 3px;
  display: flex;
  flex-direction: column;
}

.flight {
  white-space: nowrap;
}

.flight-path {
  width: 6px;
  min-height: 85px;
  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;
}