style.css

body {
	font-family: tahoma,sans-serif;
	font-size: 18px;
	margin: 0;
}

form {
	margin: 0 auto;
	display: flex;
	flex-flow: row wrap;
	width: 100%;
}

.form-element {
	display: flex;
	flex-flow: column;
	color: hsl(0,0%,70%);
	cursor: pointer;
	padding: 1rem .2em;
	width: 100%;
}

.input-field:disabled
,.input-field:disabled ~ * {
	-webkit-filter: blur(.05rem);
	-moz-filter: blur(.05rem);
	-ms-filter: blur(.05rem);
	-o-filter: blur(.05rem);
	filter: blur(.05rem);
}

.form-button {
	margin: 0 .2rem;
	background: none;
	padding: 1rem 3rem;
	border: none;
	outline: none;
	cursor: pointer;
	font-weight: bold;
	font-size: 1rem;
	border: 2px solid hsl(0,0%,70%);
	color: hsl(0,0%,70%);
	border-radius: .5rem;
	text-align: left;
}

.form-button:hover, .form-button:focus {
	border-color: hsl(0,0%,45%);
	color: hsl(0,0%,45%);
}

.input-label {
	font-weight: bold;
	margin-right: .5em;
	order: 1;
}

.input-field {
	border: none;
	outline: none;
	font-size: 1rem;
	flex-grow: 2;
	order: 2;
}

.input-field:disabled {
	background-color: hsla(0,0%,0%,0);
}

.input-line {
	margin-top: .2em;
	width: 100%;
	height: .2em;
	stroke: hsl(0,0%,70%);
	order: 3;
}

.input-description{
	font-size: .7em;
	width: 100%;
	height: 0;
	overflow: hidden;
	transition: height .2s;
	order: 4;
}

.input-field:focus ~ .input-description {
	height: 1.5em;
}

.input-field:focus ~ .input-label
,.input-field:focus ~ .input-description {
	color: hsl(0,0%,45%);
}

.input-field:valid ~ .input-line {
	stroke: hsl(119, 100%, 39%);
}
.input-field[data-touched]:invalid ~ .input-line {
	stroke: hsl(0, 100%, 39%);
}

@media (min-width: 30rem) {
	.form-element {
		flex-flow: row wrap;
	}
}

@media (min-width: 60rem) {
	form{
		width: 60rem;
	}

	.form-element {
		padding: 1.5rem 1rem;
	}

	.form-button {
		margin: 0 1rem;
	}
}