<!DOCTYPE html>
<html lang="en">
<head><title>title</title></head>
<div>
<input id="i1" type="checkbox">
<label for="i1">
Label 1
</label>
</div>
<div>
<input id="i2" type="checkbox">
<label for="i2">
Label 2
</label>
</div>
<div>
<input id="i3" type="checkbox">
<label for="i3">
Label 3
</label>
</div>
<div>
<input id="i4" type="checkbox">
<label for="i4">
Label 4
</label>
</div>
<br>
<br>
Div1
<div class="div-1">
<input id="i5" type="checkbox">
<label for="i5">
Div1
</label>
</div>
<br>
<br>
Div2
<div class="div-2">
<input id="i6" type="checkbox">
<label for="i6">
Div2
</label>
</div>
<br>
------------------------------
<br>
Solution
<br>
<div class="div-3">
<input id="i7" type="checkbox">
<label for="i7">
Div3
</label>
</div>
<div class="div-1">
<input id="i8" type="checkbox">
<label for="i8">
Div4
</label>
</div>
</html>
div {
font: 12px sans-serif
}
.div-1 {
display: flex;
align-items: center;
}
.div-2 {
display: flex;
align-items: baseline;
}
.div-3 {
display: flex;
align-items: center;
label {
margin-top: 2px;
}
}
View Compiled
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.