Edit in JSFiddle

<div id="ToDoList" contenteditable="true">
    <div contenteditable="false"><b>Enter your tasks of the day:</b>
    </div>
    <ol>
        <li>Breakfast with CEO.</li>
        <li>Lunch with board members.</li>
        <li>Dinner with Family.</li>
        <li>Nighout party with friends.</li>
    </ol>
</div>

#ToDoList {
    border:3px solid black;
    height:200px;
    width:400px;
    overflow-y:scroll;
    background-color:lightyellow;
    padding:4px;
}
#ToDoList li {
    border-bottom:1px solid black;
    margin-bottom:10px;
}
#ToDoList ol {
    margin-left:-15px;
}