Project 27: To-Do List UI
CSS Stylist
Builds on these lessons
Step 1 of 3
Project
One Reusable Checkbox-Row Pattern
Write a single .task-row pattern (flex row, gap, padding) reused identically for every to-do item — no per-item overrides. This is exactly the discipline a component library enforces: one well-designed pattern, reused everywhere, rather than a slightly different version hand-tuned on every page.
🎯 Your Task
Please add the exact code shown in the light gray box below to your editor.Do not delete your previous code, just insert these new lines in the correct place!
.task-row {
display: flex;
align-items: center;
gap: 12px;
padding: 12px 0;
border-bottom: 1px solid #e5e7eb;
}