Align labels and inputs in nested elements - css

Question

Semantically, my data is structured something like the following:
<div class="inputs">
<div class="top">
<h4>Top</h4>
<label for="top-1">Label 1</label>
<input id="top-1"/>
<label for="top-2">Label 2 is longer than the others</label>
<input id="top-2"/>
</div>
<div class="middle">
<h4>Middle</h4>
<label for="middle-1">Label 3</label>
<select id="middle-1">
<option value="middle-value-1">Value 1</option>
<option value="middle-value-2" selected>This is a longer value</option>
</select>
<label for="middle-2">Label 4</label>
<input id="middle-2"/>
</div>
<div class="bottom">
<h4>Bottom</h4>
<label for="bottom-1">Label 5</label>
<input id="bottom-1"/>
<label for="bottom-2">Label 6</label>
<input id="bottom-2"/>
</div>
</div>
I'd like to display these as distinct but related groups. For aesthetic purposes, I'd like to align and equally size all of the inputs and selects. Is it possible to do this without using explicit widths for everything? I greatly prefer to let things size themselves whenever possible.
Below is an implementation using display: grid with fixed widths for the columns and the grid itself. Is there any way to do this with dynamic sizes?
I'm not stuck on display: grid, by the way. It's just the simplest solution I've come up with so far. I like that it helps keep my HTML simple and semantic. I can use display: table just as well if I nest the labels and inputs in a div with display: table-row. But I still can't let things size dynamically, unless I flatten it by removing the top, middle, and bottom divs.
.inputs > div {
display: grid;
grid-template-columns: 13em 10em;
width: 24em;
gap: 0.5em;
padding: 0.5em;
}
.inputs label {
grid-column: 1;
}
.inputs select, .inputs input {
grid-column: 2;
}
.inputs h4 {
grid-column: 1 / span 2;
margin: 0;
}
.top, .bottom {
background-color: #c0c0c0;
}
.middle {
background-color: #e0e0e0;
}
.middle, .bottom {
margin-top: 0.5em;
}
<div class="inputs">
<div class="top">
<h4>Top</h4>
<label for="top-1">Label 1</label>
<input id="top-1"/>
<label for="top-2">Label 2 is longer than the others</label>
<input id="top-2"/>
</div>
<div class="middle">
<h4>Middle</h4>
<label for="middle-1">Label 3</label>
<select id="middle-1">
<option value="middle-value-1">Value 1</option>
<option value="middle-value-2" selected>This is a longer value</option>
</select>
<label for="middle-2">Label 4</label>
<input id="middle-2"/>
</div>
<div class="bottom">
<h4>Bottom</h4>
<label for="bottom-1">Label 5</label>
<input id="bottom-1"/>
<label for="bottom-2">Label 6</label>
<input id="bottom-2"/>
</div>
</div>

Answer 1

I found a solution with display: table. It's a little uglier than the grid solution and not quite as semantic as I'd like, but it's close, and it does what I want.
.inputs {
display: table;
border-collapse: collapse;
}
.inputs > .top, .inputs > .bottom {
display: table-row-group;
background-color: #c0c0c0;
}
.inputs > .middle {
display: table-row-group;
background-color: #e0e0e0;
}
.input {
display: table-row;
}
.input > * {
display: table-cell;
}
.input > h4, .input > label {
padding: 0.5em 0.25em 0 0.5em;
}
.input > select, .input > input {
margin: 0 0.5em 0.25em 0;
box-sizing: border-box;
width: calc(100% - 0.5em);
}
.input:last-child > * {
margin-bottom: 0.5em;
}
.padding {
padding: 0.5em 0;
}
<div class="inputs">
<div class="top">
<div class="input">
<h4>Top</h4>
<div class="empty"></div>
</div>
<div class="input">
<label for="top-1">Label 1</label>
<input id="top-1"/>
</div>
<div class="input">
<label for="top-2">Label 2 is longer than the others</label>
<input id="top-2"/>
</div>
</div>
<div class="input">
<div class="padding"></div>
</div>
<div class="middle">
<div class="input">
<h4>Middle</h4>
<div class="empty"></div>
</div>
<div class="input">
<label for="middle-1">Label 3</label>
<select id="middle-1">
<option value="middle-value-1">Value 1</option>
<option value="middle-value-2" selected="selected">This is a longer value</option>
</select>
</div>
<div class="input">
<label for="middle-2">Label 4</label>
<input id="middle-2"/>
</div>
</div>
<div class="input">
<div class="padding"></div>
</div>
<div class="bottom">
<div class="input">
<h4>Bottom</h4>
<div class="empty"></div>
</div>
<div class="input">
<label for="bottom-1">Label 5</label>
<input id="bottom-1"/>
</div>
<div class="input">
<label for="bottom-2">Label 6</label>
<input id="bottom-2"/>
</div>
</div>
</div>

Answer 2

You can set your grid up more dynamically with something like this:
.inputs {
width: 33%;
min-width: 25em;
}
.inputs > div {
display: grid;
grid-template-columns: 1.3fr 1fr;
gap: 0.5em;
padding: 0.5em;
}
I used your outer container to deal with the width as it relates to the screen. The hard min-width of 25px keeps the long label from wrapping to another line, instead showing a horizontal scrollbar if the screen size causes 33% of the width to go below 25px.
For your inner containers, you can change the unit in grid-template-columns to fr, which means fraction of available space. This will let your columns dynamically size along with your window (until you hit the min-width for the outer container). You can experiment with the width percentage to work out just how much dynamic sizing you would like to do.
This is a good writeup of fr if you would like one.