Расположение 2 элементов (таймера обратного отсчета и кнопки) в ряд, рядом - они не центрированы

Question

У меня проблема с одним из разделов в моем HTML-коде.

Моя идея проста: один раздел состоит из 1 ряда, который разделен на 2 столбца.

В левом столбце я попытался установить таймер обратного отсчета и кнопку «Отправить» в правом столбце. Они должны быть рядом и на одинаковом расстоянии друг от друга; но есть некоторые проблемы - они на неравном расстоянии, и мне интересно, как это исправить ...

Кроме того, когда я проверяю, как черновой вариант моего сайта выглядит на мобильном устройстве, части часов не остаются вместе - они просто перемещаются друг под другом.

Вот jsfiddle .

Что я делаю не так?

<div class="container-fluid">
<div class="row align-items-center"><div class="col-6 mx-auto">    
<h3 style=" font-family: Open Sans; font-weight: light; font-size: 20px; color: 636363;letter-spacing: 1px; padding-left:110px;">Deadline:</h3>
<div id="clockdiv">
<div>   <span class="days"></span>
<div class="smalltext">Days</div>
</div>
<div>   <span class="hours"></span>
<div class="smalltext">Hours</div>
</div>
<div>   <span class="minutes"></span>
<div class="smalltext">Minutes</div>
</div>
<div>   <span class="seconds"></span>
<div class="smalltext">Seconds</div>
</div>
</div>
</div>
<div class="col-6 mx-auto">
<button class="button button1" style="width: 300px; height: 100px;">Submit</button>
</div>
</div>
</div>    

И CSS:

  #clockdiv{
    font-family: Open Sans;
    color: #ffffff;
    display: inline-block;
    font-weight: 100;
    text-align: center;
    font-size: 30px;
  }

  #clockdiv > div{
    padding: 0px;
    border-radius: 3px;
    background: #fffff;
    display: inline-block;
  }

  #clockdiv div > span{
    padding: 15px;
    border-radius: 3px;
    background: #000;
    display: inline-block;
    position: relative;

  }

  .smalltext{
    padding-top: 5px;
    font-size: 16px;
    color: #000;
    position: relative;

  }

  .button {
    background-color: #fff; 
    border: none;
    color: white;
    text-align: center;
    text-decoration: none; 
    font-size: 16px;
    font-family: 'Open Sans';
    margin: 4px 2px;
    -webkit-transition-duration: 0.4s; 
    transition-duration: 0.4s;
    cursor: pointer;
  }

  .button1 {
    background-color: white; 
    color: #000; 
    border: 2px solid #000;

  }

  .button1:hover {
    background-color: #fff;
    color: white;