将装订线放在两行之间的两个输入之间

我使用自举轮播，并希望将2个输入放在轮播中水平和垂直居中的一行中。我是在我的网站上完成的，并且有效。不幸的是，我试图在小提琴上复制它而没有成功。所以我的第一个问题是如何摆弄小提琴。我给你的代码和链接

<div class="container-fluid">
    <div class="row">
        <div style="height: 1076px;background-color: #F1F1F1" class="col-xs-12 col-sm-12 col-md-12 col-lg-12 col-xl-12">
      <div id="carouselExampleControls" style="border: 1px solid red;height: 500px;" class="carousel slide" data-ride="carousel" data-interval="false"  >
        <div class="carousel-inner">
          <div   class=" carousel-item active horizontal-vertical-center">
            <div class="d-flex flex-row flex-wrap " >
              <div class="form-group mb-3" >
                <div class=" textAlignCenter">
                  <input type="text"  placeholder="Téléphone portable" formControlName="mobileTelephone">
                </div> 
              </div>
              <div class="form-group mb-3" >      
                <div class="textAlignCenter">
                  <input type="text"  placeholder="Téléphone fixe" formControlName="fixedTelephone">
                </div>
              </div>
            </div>
          </div>
        </div>        
      </div>
    </div>
  </div>
</div>


.horizontal-vertical-center {
  margin: 0;
  left: 50%;
  top: 50%;
  -ms-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
}

.textAlignCenter {
  text-align: center;
}

https://jsfiddle.net/boilerplate/bootstrap

但是，这篇文章的目的是在两个输入之间放置一个装订线，同时，当我减小窗口的宽度大小以使两个字段仍然居中放置在另一个上方时，请注意。我试图添加以下css类

div.mb-3:nth-child(1) {
  margin-right: 10px;
}

但是，一旦我添加此类，则在减小大小时，一个字段在另一个字段上方就不再居中，好像div.mb-3：nth-​​child（1）的margin-right相对于自身与其容器之间的距离。

那么，您能告诉我如何纠正小提琴以及如何在两个字段之间应用装订线吗？