right edge of box at given distance from left viewport edge

dabblet.css

/**
 * right edge of box at given distance from left viewport edge
 */
 
#a
{
	position: absolute;
	top: 100px;
	right: 100%;
	transform: translateX(100px);
}

#b
{
	position: absolute;
	top: 200px;
	left: 100px;
	transform: translateX(-100%);
}

#c
{
	float: left;
	margin-top: 300px;
	margin-left: 100px;
	transform: translate(-100%);
}

#d
{
	float: right;
	margin-top: calc(100px - 2.5em);
	margin-right: 100%;
	transform: translateX(100px);
}

div
{
	padding: 0.5em 1em;
	background: #048;
	color: white;
}

html
{
	background: linear-gradient(to right, white 99px, silver 99px, silver 100px, white 100px);
	font: 1em/1.5 "Helvetica Neue", Helvetica, sans-serif;
}

html, body
{
	margin: 0;
	padding: 0;
	height: 100%;
}

dabblet.html

<div id="a">a</div>
<div id="b">b</div>
<div id="c">c</div>
<div id="d">d</div>

dabblet.js

// alert('Hello world!');

settings.json

{"view":"split-vertical","fontsize":"100","seethrough":"","prefixfree":"1","page":"css"}