@charset "utf-8";

.container {
	display: grid;
	grid-template-columns: 10% 1fr 2fr 12em;
	grid-gap: 0.3em 0.6em;
}

input:checked + label {
	font-weight: bold;
}

/* fallback 30%/70% float layout */
input, output, textarea, select, button {
	clear: both;
	float: right;
	width: 70%;
}

label {
	float: left;
	width: 30%;
	text-align: right;
	padding: 0.25em 1em 0 0;
}

button, input[type="checkbox"], input[type="radio"] {
	width: auto;
	float: left;
	margin: 0.5em 0.5em 0 30%;
}

input[type="checkbox"] + label, input[type="radio"] + label {
	width: auto;
	text-align: left;
}

.formgrid {
	display: grid;
	grid-template-columns: 1fr 1em 2fr;
	grid-gap: 0.3em 0.6em;
	grid-auto-flow: dense;
	align-items: center;
}

input, output, textarea, select, button {
	grid-column: 2 / 4;
	width: auto;
	margin: 0;
}

input[type="checkbox"], input[type="radio"] {
	grid-column: 1 / 3;
	justify-self: end;
	margin: 0;
}

label, input[type="checkbox"] + label, input[type="radio"] + label {
	width: auto;
	padding: 0;
	margin: 0;
}

textarea + label {
	align-self: start;
}

/* grid layout */
@supports (display: grid) {
	...
}