Make the next sibling push on a relative positioned element

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.