bootstrap4-datetimepicker time-picker positioning

Please assist with the below issue:

I am using https://github.com/technovistalimited/bootstrap4-datetimepicker and trying to display the clock on the right hand side underneath focusable message span but its one component and strungling to align it please see example image Current

HTML:

<div class="section schedule bg-white">
                    <h3 class="breakword" role="heading" aria-level="2">Select time</h3>
                    <div id="datetimepicker" class="schedule-picker"></div>
                    <div class="schedule-picker">
                        <div>
                            <div class="schedule-time-picker"><span class="focusable message" tabindex="0" aria-label="Select a service and date to see available times.">Select a service and date to see available times.</span></div>
                        </div>
                    </div>
                </div>

CSS:

/* Schedule */

.schedule-picker {
    display: inline-block;
    vertical-align: top;
    width: 392px;
    margin: 0 40px;
    text-align: left;
}

.schedule-time-picker span.message {
    color: #666666;
    background-color: #F4F4F4;
    display: block;
    cursor: auto;
    text-align: center;
    white-space: normal;
    padding: 12px 10px;
    margin: 1px;
}

@media (max-width: 1020px) {
    .schedule-picker {
        width: 100%;
        margin: 0;
    }
    .schedule-time-picker {
        max-height: inherit;
        width: 330px;
        margin: 32px auto 16px;
    }
}