<form>
<fieldset>
<label for="firstname">First name</label>
<input id="firstname" type="text" />
<label for="lastname">Last Name</label>
<input id="lastname" type="text" />
<label for="dob">Date of birth</label>
<input id="dob" type="date" />
</fieldset>
<button type="submit">Submit</button>
</form>
@use postcss-preset-env{
stage: 0;
}
form {
padding: 2rem;
max-width: 600px;
display: grid;
grid-template-columns: auto 1fr;
grid-gap: 1rem;
align-items: baseline;
}
fieldset {
display: contents;
}
label {
text-align: right;
}
button {
height: 2rem;
grid-column: 1 / -1;
}
@media (max-width: 500px) {
form {
grid-template-columns: 1fr;
}
label {
text-align: left;
margin-bottom: -0.75rem;
}
}
View Compiled
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.