Flexible inline text with background color and large right padding

dabblet.css

/**
 *  Flexible inline text with background color and large right padding
 */
 
body {
	width: 50%;
	background: #363532;
}

p {
	display: inline;
}

p, p>span {
	position: relative;
	right: 4em; /* 4em right margin */
	line-height: 2em;
	padding: .3em 0; /* line padding */
	background: #fff;
}

span>span {
	position: relative;
	left: .5em; /* left margin */
}

p {
	left: 4em;
}

dabblet.html

<p>
	<span><span>Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis 
	vestibulum. Morbi leo risus, porta ac consectetur ac, vestibulum 
	at eros. Donec id elit non mi porta gravida at eget metus.</span></span>
</p>

settings.json

{"view":"split","prefixfree":"1","page":"css"}