Поле ввода теряет позицию и перекрывается другими полями ввода в div

Question

Я пытаюсь прикрепить div с иконкой к div с полем ввода в одной строке, но когда я помещаю их в упаковывающий div (как показано в предыдущих вопросах в stackoverflow) и применяю некоторые стили, я получаю поле ввода перекрывающимсявнизу (соседнее поле ввода, которое тоже в div).

Я пробовал несколько разных позиций, пытался добавить немного полей сверху и снизу безуспешно.Проблема в том, что я настроил некоторые анимации, которые работают нормально, и я не хочу их нарушать, поэтому я использовал обтекание div, но это нарушает поле ввода, с которым я работаю, и индикатор (они уменьшаются) и теряет позицию какописано ранее.

Я ожидаю, что поля ввода будут одно ниже другого, как и раньше, когда я не использовал упаковочный div.Теперь поля ввода перекрываются.

.border-label {
  display: block;
  position: relative;
}

.border-label label {
  position: absolute;
  left: 0;
  top: 0;
  opacity: 1;
  font-size: 75%;
  -webkit-transition: all 0.2s;
  transition: all 0.2s;
  top: -0.5em;
  left: 4.65rem;
  z-index: 3;
  line-height: 1;
  padding: 0 1px;
}

.border-label label::after {
  content: " ";
  background: white;
  display: block;
  position: absolute;
  height: 2px;
  top: 50%;
  left: -0.2em;
  right: -0.2em;
  z-index: -1;
}

.border-label .form-control::-webkit-input-placeholder {
  opacity: 1;
  -webkit-transition: all 0.2s;
  transition: all 0.2s;
}

.border-label .form-control:-webkit-autofill,
.border-label .form-control:-webkit-autofill:focus,
.border-label .form-control:-webkit-autofill:active,
.border-label .form-control:-webkit-autofill:hover {
  -webkit-box-shadow: 0 0 0 30px white inset !important;
}

.border-label .form-control:placeholder-shown:not(:focus)::-webkit-input-placeholder {
  opacity: 0;
}

.border-label .form-control:placeholder-shown:not(:focus)+* {
  display: flex;
  align-content: center;
  justify-content: center;
  font-size: 105%;
  opacity: 0.5;
  top: 0.7rem;
}

.cont {
  position: relative;
  padding-top: 10px;
  padding-bottom: 10px;
}

.left-side {
  display: inline-block;
  float: left;
}

.right-side {
  display: inline-block;
  float: left;
  border: 1px solid #70c5c0;
  padding: 10px 10px 10px 10px;
  border-radius: 5px;
  align-content: center;
}

<!--<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet"/>-->
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>


<div class="modal fade" id="regModal">
  <div class="modal-dialog modal-register">
    <div class="modal-content">
      <h5 class="modal-header text-white py-2 blueheader">
        <strong class="text-center">Sign up</strong>
      </h5>
      <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
      <div class="modal-body px-lg-5 pt-0">
        <form class="text-center formcolor" action="{{ path('register') }}" method="post">
          <div class="md-form">
            <div class="form-group border-label">
              <input type="email" class="col-8 offset-2 form-control" id="regEmailInput" name="appbundle_user[email]" placeholder="Type here...">
              <label for="regEmailInput">Your email:</label>
            </div>
            <div class="form-group border-label">
              <input type="text" class="col-8 offset-2 form-control" id="regUserInput" name="appbundle_user[username]" placeholder="Type here...">
              <label for="regUserInput">Your username:</label>
            </div>
            <div class="form-group cont">
              <div class="border-label left-side">
                <input type="password" class="col-8 offset-2 form-control" id="regPassInput" name="appbundle_user[password][first]" placeholder="Type here...">
                <label for="regPassInput">Password first:</label>
                <meter max="5" id="passwordStr"></meter>
                <p id="passwordStrTxt"></p>
              </div>
              <div class="right-side">
                <label for="passShower"><i id="showerIcon" class="fas fa-eye"></i></label>
                <input type="checkbox" id="passShower">
              </div>
            </div>
            <div class="form-group border-label">
              <input type="password" class="col-8 offset-2 form-control" id="regPassSecInput" name="appbundle_user[password][second]" placeholder="Type here...">
              <label for="regPassSecInput">Password second:</label>
            </div>
            <div class="form-group">
              <input type="submit" class="btn btn-primary logBtn" id="formSubmit" value="Sign In">
            </div>
          </div>
        </form>
      </div>
    </div>
  </div>
</div>

Моя текущая ситуация: https://jsfiddle.net/2hnct1ry/

Моя предыдущая ситуация: https://jsfiddle.net/2hnct1ry/1/

PS Мои входы получают стилизованные меткисверху слева, но в скрипке справа вверху (не могу добавить библиотеки, потому что я новичок в jsfiddle, извините).