<form action=''>
<div class='employee-options grid-center'>
<div class='checkbox-option'>
<input id='toplist' name='toplist' type='checkbox'/>
<label for='toplist'>Employee Sign</label>
</div>
<div class='employee-decisions'>
<div class='checkbox-option'>
<input id='list01' name='list01' type='checkbox'/>
<label for='list01'>Employee Decision</label>
</div>
<div class='sub-options'>
<div class='checkbox-option'>
<input id='list02' name='list02' type='checkbox'/>
<label for='list02'>Go Right</label>
</div>
<div class='checkbox-option'>
<input id='list03' name='list03' type='checkbox'/>
<label for='list03'>Turn Off the Switch</label>
</div>
<div class='checkbox-option'>
<input id='list04' name='list04' type='checkbox'/>
<label for='list04'>Go Left</label>
</div>
</div>
</div>
</div>
</form>
.employee-options {
outline: 2px solid red;
padding: 1rem;
}
.employee-options .checkbox-option {
margin-bottom: .5rem;
}
.employee-options label {
cursor: pointer;
/* prevent label text selection on double click */
user-select: none;
}
.sub-options {
margin-left: 20px;
}
View Compiled
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.