BoostrapV4 prepend для группы ввода, разделите один и тот же prepend для двух разных полей ввода

Question

Я ищу тот же результат, что и ниже, но добавляю оба поля к одному и тому же. В результате слово "до" находится в центре предисловия. Любые предложения, как это будет сделано

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">


<div class="input-group date">
  <div class="input-group-prepend">
    <span class="input-group-text" id="1" style="min-width:70px; border-bottom: none;border-bottom-left-radius: 0;">Till</span>
  </div>
  <input type="date" class="form-control" min="2016-01-01" max="2030-01-01" placeholder="yyyy-mm-dd" aria-describedby="1" style="line-height:normal;">
</div>

<div class="input-group date">
  <div class="input-group-prepend">
    <span class="input-group-text" id="2" style="min-width:70px; border-top: none; border-top-left-radius: 0;"></span>
  </div>
  <input type="time" class="form-control" placeholder="tt:ss" aria-describedby="2">
</div>

<script src="https://code.jquery.com/jquery-3.2.1.js" integrity="sha256-DZAnKJ/6XZ9si04Hgrsxu/8s717jcIzLy3oi35EouyE=" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.0/umd/popper.min.js" integrity="sha384-cs/chFZiN24E4KMATLdqdvsezGxaGsi4hLGOzlXwp5UZB1LY//20VyM2taTB4QvJ" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/js/bootstrap.min.js" integrity="sha384-uefMccjFJAIv6A+rW+L4AHf99KvxDjWSu1z9VI8SKNVmz4sk7buKt/6v9KI65qnm" crossorigin="anonymous"></script>

Я не знаю, имеет ли это смысл, но пред. это работало, чтобы иметь один общий prepend для двух inputfeilds в Boostrap.3..