Fix the vertical alignment #106
Description
Info
difficulty: easy
title: Fix the vertical alignment
type: question
template: vanilla
tags: cssQuestion
We have a row layout where there can be inputs with label or without label. The requirement is the if there is a input with labe, then all the inputs without label should have margin top equal to the height of label + space between label and margin.
Template
index.html
<!doctype html>
<html>
<head>
<title>Parcel Sandbox</title>
<meta charset="UTF-8" />
</head>
<body>
<div class="row">
<div class="field">
<label class="label">Name</label>
<div class="control">
<input class="input" type="text" placeholder="Text input" />
</div>
</div>
<div class="field">
<div class="control">
<input class="input" type="text" placeholder="Text input" />
</div>
</div>
</div>
</body>
</html>styles.css
body {
font-family: sans-serif;
}
h1 {
font-size: 1.5rem;
}
.row {
display: flex;
gap: 1rem;
}
.field {
display: flex;
flex-direction: column;
gap: 0.5rem;
}
.field label {
height: 1cap;
font-size: 14px;
}index.js
import "./styles.css";package.json
{
"dependencies": {},
"main": "/index.js",
"devDependencies": {}
}