Slide divs left and right transition

Question

I have a slide left/right and right/left transition between two divs that occurs simultaneously.

Fiddle : https://jsfiddle.net/n8jyzys2/

However the current transition looks somewhat like this (The divs are at different rows during the transition):

Slide Transition 1

The transition I would like to achieve is similar to this (Have both divs at the same row simultaneously during transition) :

Slide Transition 2

Any ideas?

---

JS Credit

jQuery.fn.extend({

  slideRightShow: function() {
    return this.each(function() {
        $(this).show('slide', {direction: 'right'}, 1000);
    });
  },
  slideLeftHide: function() {
    return this.each(function() {
      $(this).hide('slide', {direction: 'left'}, 1000);
    });
  },
  slideRightHide: function() {
    return this.each(function() {
      $(this).hide('slide', {direction: 'right'}, 1000);
    });
  },
  slideLeftShow: function() {
    return this.each(function() {
      $(this).show('slide', {direction: 'left'}, 1000);
    });
  }

});

$("#slide_two_show").click(function () {

    $("#slide_one_div").slideLeftHide();
    $("#slide_two_div").slideRightShow();

});

$("#slide_one_show").click(function () {

    $("#slide_one_div").slideLeftShow();
    $("#slide_two_div").slideRightHide();

});

HTML Code

<div>

    <div id="slide_one_div">
        <br>
        <div class="mydiv">
          <h1>Slide 1 (Left Slide)</h1>
          <p>...</p>
          <button id="slide_two_show">Show Slide 2</button>
        </div>
    </div>

    <div id="slide_two_div" style = "display:none">
        <br>
        <div class="mydiv">
          <h1>Slide 2 (Right Slide)</h1>
          <p>...</p>
          <button id="slide_one_show">Show Slide 1</button>
        </div>
    </div>          

</div>

Style

.mydiv {
    background: green;
    width: 100%;
    height: 100px;
    outline: 1px solid #f93;
}

Answer 1

Add this CSS to your page:

#slide_one_div {
  position: absolute;
  width: 100%;
}

Hope I helped ;)