Сделайте следующий толчок родному элементу

Question

У меня небольшой вопрос.Что было бы лучшим способом сделать последний элемент последнего элемента div?это структура:

<div class="row">
    <div class="formContainer col-lg-6">
        <form>
            <fieldset>
                ...content....
                <button>Submit Form</button>
            </fieldset>
        </form>
    </div>
    <div class="col-lg-6" id="datePicker">
       calendar where user picks dates
    </div>
</div>

и CSS (более или менее)

form > button {
    width: 200px;
    margin: auto;
    display: block;
    margin-bottom: 15px;
    position: relative;
    right: -54%;
}

Вот изображение в качестве примера:

Я хочу, чтобы правый div col-6 нажал на кнопку сохранения, которая находится в левом col-6, потому что есть элементы самого правого div, которые добавляются и начинают перекрываться.Как мне поступить так?

Answer 1

Это будет сделано:

<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"></script>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">

<div class="row">
    <div class="formContainer col-lg-6">
        <form>
            <fieldset>
                ...content....
            </fieldset>
        </form>
    </div>
    <div class="col-lg-6" id="datePicker">
       calendar where user picks dates
    </div>
    <div class="col-lg-12 text-center">
       <button class="btn btn-default"
               onclick="$('.formContainer form', $(this).closest('.row')).submit();">Submit Form</button>
    </div>
</div>

Обратите внимание: я переместил кнопку в новый столбец и использую встроенный Javascript для отправки формы при ее нажатии.