Pass Container

dabblet.css

/**
 * Pass Container
 */

/*background: #f06;
background: linear-gradient(45deg, #f06, yellow);
min-height: 100%;*/
* {
box-sizing: border-box;
}
.container {
position: relative;
width: 100%;
	min-height: 100px;
background: red;
}
.content {
	min-height:100px;
	height: 100px;
	border-left: 20px solid yellow;
}
.qty-selector {
	background: gray;
}


.qty-selector{
	display: block;
}
.qty-selector-container {
height: 50px;
font-size: 0;
}
button, input {
line-spacing: 
display: inline-block;
vertical-align: middle;
}
button {
border: none;
background: none;
width: 10%;
height: inherit;
color: blue;
font-weight: bold;
font-size: 20px;
}
input {
width: 80%;
text-align: center;
vertical-align: middle;
background: none;
border:none;
}
.qty-minus {

}
.qty-plus {

}

@media (min-width: 768px) {
	.qty-selector {
		position: absolute;
		top: 0;
		right: 0;
		width:300px;
		bottom: 0;
		background: gray;
	}
	.qty-selector-container {
		display: inline-block;
		vertical-align: middle;
		height:100px;
		width: 100%;
	}
	button {
		width: 10%;
		height: inherit;
	}
	input {
		width: 80%;
		display: inline-block;
	}
	.qty-minus {

	}
	.qty-plus {


	}
}
/
/

dabblet.html

<div class="container">
	<div class="content">
	something
	</div>
	<div class="qty-selector">
		<div class="qty-selector-container">
			<button class="qty-minus" value="-">-</button>
			<input>
			<button class="qty-plus">+</button>
		</div>
	</div>
</div>

dabblet.js

// alert('Hello world!');

settings.json

{"view":"separate","fontsize":"70","seethrough":"","prefixfree":"1","page":"all"}