Simple static HTML+CSS style implementation

Easy job for an HTML+CSS implementation that reproduces the outline appearance and behavior shown in the project attachments. I expect 2-3 files (HTML, CSS or SCSS, and optionally Javascript). Beyond the outline view demonstrated I'll comment on a few key success criteria. Key appearance objectives: 1. Input fields styled with the background [i.e so they don't look like browser input boxes] 2. If user input is longer the the input box width, the text should wrap to multiple lines rather than scroll. Key interaction objectives, demonstrated in video: 1. Single mouse click entry into edit mode 2. Mouse rollover affects as shown 3. Z-Order for keyboard tab key behavior moving between fields Implementation considerations: The outline is destined for drag and drop behavior, so each row needs to be nicely wrapped somehow in an <li> or <div>. The dot that appears on the left on rollover is the drag handle which needs to be wrapped in a <div>. Note: implementing the DnD itself is out of scope for this project. Note on the notes field which are shown in the screenshots that start with notes_*. Each row has an optional associated note field which can be toggled on/off by the notes icon on the outermost right of each row. Project deliverables should include a static example implementation with the notes being shown and now shown on some elements. For extra credit, you can implement the toggle affect when the notes icon is clicked. jQuery may be used if desired.