<!doctype html> <html lang="en"> <head> <meta charset="utf8"/> <style> body { display: grid; grid-template: "summary detail" 1fr "controls controls" 40px /1fr 1fr ; } task-list { grid-area: summary; display: grid; } task-summary:hover { background-color: #eee; cursor: pointer; } task-summary:active { background-color: #ddd; } task-detail { grid-area: detail; background-color: #eee; } </style> </head> <body> <task-list> </task-list> <task-detail> <input type="checkbox" name="done"/> <input type="text" name="description"/> <input type="date" name="due_date"/> <button>Delete</button> </task-detail> <button>Add Task</button> <script src="main.js"></script> </body> </html>