三列行，中心列对齐

Question

如何使用Bootstrap 4实现以下目标？

+------------------------+----+-------+
|<short value>           | to | <....>|
+------------------------+----+-------+
|<this is a longer value>| to | <....>|
+------------------------+----+-------+
|<....>                  | to | <....>|
+------------------------+----+-------+

可以有一个或多个行。 中心单元格为文本“至”。 其他单元格是开始和结束值，每个值可能非常短或非常长。

我需要使中心列在所有行中垂直对齐。我尝试了此操作，但没有得到想要的结果：

 <div class="row">
     <div class="col">...</col>
     <div class="col-auto">to</col>
     <div class="col">...</col>
 </div>
 <div class="row">
     <div class="col">...</col>
     <div class="col-auto">to</col>
     <div class="col">...</col>
 </div>