Use grid to align wrapped form labels and inputs - html

Question

I am using grid layout to align form labels and inputs vertically:
form {
display: grid;
width: 10%;
grid-template-columns: repeat(2, 1fr);
grid-gap: 5px;
}
label {
grid-column: 1;
text-align: right;
}
input {
grid-column: 2;
margin-left: 0;
}
<form>
<label>Name: </label>
<input type="text">
<label>Mileage: </label>
<input type="number">
<label>Track: </label>
<input type="checkbox">
</form>
It works, but I want to keep the same layout (and still use grid) when each <label> and <input> is contained inside a <div> like this:
<form>
<div>
<label>Name: </label>
<input type="text">
</div>
<div>
<label>Mileage: </label>
<input type="number">
</div>
<div>
<label>Track: </label>
<input type="checkbox">
</div>
</form>
I have tried dividing the <form> and/or each <div> in various combinations, but nothing gets me the exact same result.
How can I align the inputs and labels vertically when they are contained in a <div>, using grid?

Answer 1

More suitable for a table layout than a grid one:
form {
display: table;
border-spacing: 5px;
}
form>div {
display: table-row;
}
label {
display: table-cell;
text-align: right;
}
input[type=checkbox] {
vertical-align: bottom;
margin-left:0;
}
<form>
<div>
<label>Name: </label>
<input type="text">
</div>
<div>
<label>Mileage: </label>
<input type="number">
</div>
<div>
<label>Track: </label>
<input type="checkbox">
</div>
</form>