Div Slider

HTML

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script>
<div class='toolbar'>
	<div class="inner" >
		<div id="divA">
			<input type="text"/>
			<input type="password" />
		</div>
		<div id="divB">
			<button >Button B</button>
			<button >Button C</button>
		</div>
	</div>
	<div class="cover">
		<button id="button1">Slide it</button>
	</div>
</div>

CSS

.cover {
  position: absolute;
  right: 1em;
}

.toolbar {
		  width:100%;
		  display:inline-block;
		  overflow: hidden;
		  white-space: nowrap;
		  margin:0px auto;
		  padding: 5px 0px;
		  background-color: skyblue;
		}
		
		#divA, #divB {
			display: inline;
		}
		
		.inner {
			float: right;
			display: inline;
      left: 100%;
      position: relative;
		}
		
		#button1 {
			float: right;
			margin-right: 5px;
			margin-left: 20px;
		}
		
		input, button {
			padding: 5px;
		}

JavaScript

$(document).ready(function() {
		$('#button1').click(function() {
			trigger();
		});
	});
  
 function trigger(){
   var $marginRighty = $('.inner');
   $marginRighty.animate({marginRight: parseInt($marginRighty.css('marginRight'),10) == 0 ? $marginRighty.outerWidth() : 0});
 }