输入组中有两个带有两个标签的文本字段

Question

我想在一个 div 中包含两个带有

input-group

类的文本字段。但是，前面几行中的标签未与字段垂直对齐。

到目前为止我有这个代码：

            <div class="col-sm-6 mt-3">
                <label class="form-label mb-1" for="exp-date">Exp.</label>
                <label class="form-label mb-1" for="cvc">CVC</label>
              <div class="input-group">
                <input type="text" class="form-control contact-form-input exp-date-select" placeholder="MM/YY" id="exp-date">
                <input type="text" class="form-control contact-form-input sec-code-select" placeholder="000" id="cvc">
              </div>
            </div>

这给了我类似的信息（注意 CVC 标签的位置）：

Answer 1

嗯。我想我通过使用一个弹性框将两个标签结合在一起来解决这个问题，每个标签的宽度为 50%：

            <div class="col-sm-6 mt-3">
              <div class="d-flex">
                <label class="form-label mb-1 w-50" for="exp-date">Exp.</label>
                <label class="form-label mb-1 w-50" for="cvc">CVC</label>
              </div>
              <div class="input-group">
                <input type="text" class="form-control contact-form-input exp-date-select" placeholder="MM/YY" id="exp-date">
                <input type="text" class="form-control contact-form-input sec-code-select" placeholder="000" id="cvc">
              </div>
            </div>
          </div>