flexy inputs

dabblet.css

/* flexy inputs */
label { display:flex; align-items:baseline }
label:before { content:attr(aria-label); text-align:right; flex:1 }
label>* { flex:1 }


/* just to look nicer */
html { background:white }
body { font:16px/1.6 HelveticaNeue-Light;
	background:#eee; min-width:21em; max-width:50%; margin:auto;
	padding:0 }
h1 { text-align:center; font:25px/1 HelveticaNeue-CondensedBold }


input, textarea { margin:.3em 0;
	font-size:inherit; font-family:inherit; line-height:inherit }
	
/* so you can see the layout boxes */
label, label:before { outline:1px solid }
body:before { content:''; position:absolute; left:50%; width:0; top:0; bottom:0; display:block; border:1px dashed }

dabblet.html

<h1>Flex centering: seems legit</h1>
<label aria-label=agnomen> <input placeholder="write your name here"> </label>
<label aria-label=predisposition> <input placeholder="political affiliations"> </label>
<label aria-label=quantization> <input placeholder="solutions of the classical Maxwell equations"> </label>
<label aria-label=verbiage> <textarea placeholder="sales pitch"></textarea> </label>

dabblet.js

// alert('Hello world!');

settings.json

{"view":"split","fontsize":"100","seethrough":"","prefixfree":"1","page":"html"}