Html 两个由文本分隔的内联输入

我想把输入放在内联位置，并用一些文本将它们分开。这样做的原因是我希望用户输入开始时间和结束时间，并使输入彼此相对接近，因此看起来视觉上令人愉悦。 我目前尝试使用行和列来实现这一点，但由于列的原因，文本之间的宽度相当大。下面是一些代码，让我了解一下我的尝试。还有其他选择吗

<div class = "w3-row">
   <div class="w3-col w3-container s3 m3 l3">
     <div style="text-align:right">
       <label for="hours-operation-s" class="register-labels">Hours of Operation:</label>
     </div>
   </div>
   <div class="w3-col w3-container s2 m2 l2" id="div-start-time">
     <input type="text" name="hours-operation-s" class="w3-input" required>
   </div>
   <div class="w3-col w3-container s2 m2 l2">
     <div class="" style="text-align:center; padding-top:5px;">
       <p><strong>to</strong></p>
     </div>
   </div>
   <div class="w3-col w3-container s2 m2 l2">
     <input type="text" class="w3-input" required>
   </div>
   <div class = "w3-col w3-container s3 m6 l3">
     <!-- Blank -->
   </div>
</div>

营业时间：
至

使用Flexbox非常简单

Bootstrap将其整个平台从Bootstrap3改为Bootstrap4是有原因的，主要是为了从使用浮点数改为flexbox

Flexbox需要两件事：

父容器（例如DIV、section、aside、p等）

一个或多个子元素（例如div、p、img等）

在父项上打开flexbox，

显示：flex

然后，有各种各样的开关。有些是在父级上设置的（如
justify content
），但其他可能是在项目上设置的（如
flex-grow:1
）

演示：

.row{display:flex；}
.col内联{flex:1；XXXborder:1px实心红色；}
.col left{最大宽度：45vw；文本对齐：right；}
.col right{最大宽度：48vw；文本对齐：左；}
.col到{最大宽度：5vw；文本对齐：居中；}
.w3输入{宽度：80px；文本对齐：中心；}

营业时间：
到
我不知道FlexBox。非常感谢。我最终修补了w3上的flexbox并实现了我想要的。非常感谢。