Make the next sibling push on a relative positioned element - html

Question

I have a small question.
What would be the best way to make a sibling push on the last element of said div?
this is the structure:
<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>
and the CSS (more or less)
form > button {
width: 200px;
margin: auto;
display: block;
margin-bottom: 15px;
position: relative;
right: -54%;
}
Here is an image as an example:
I want the right col-6 div to push on the save button which is in the left col-6, because there are elements of the rightmost div that are being added that start overlapping. How should I go about doing so?

Answer 1

This will do it:
<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>
Notice I moved the button in a new column and I'm using inline Javascript to submit the form when it's pressed.