Edit in JSFiddle

var MINI = require('minified'); 
var $ = MINI.$, HTML = MINI.HTML;

$(function() {
    $('#itemForm').on('submit', function() {
        $('#lastLine').addBefore(
        	HTML('<li>'+
                 '<div class="desc">{{desc}}</div>'+
                 '<div class="time">{{new Date() :: hh:mm a}}</div>'+
                 '<div class="deleteTd"><button>&#x2718;</button></div>'+
            '</li>', this.values())
            .onClick('.deleteTd button', function() {
                this.up('li').remove();
            })
        );
        $('#itemForm input').set('value', '');
    });
});

<ul class="list">
    <li class="head">
        <div class="desc">Description</div>
        <div class="time">Time</div>
        <div class="deleteTd"></div></li>
    <li id="lastLine">
        <div class="newDesc">
            <form id="itemForm"><input name="desc" autocomplete="off" placeholder="Enter new item here"/></form>
        </div>
        <div></div>
        <div class="deleteTd"></div>
    </li>
</ul>

body { font-family: sans-serif; }
li, .newDesc input, .deleteTd button { background-color: #eee; }
ul { display: table; border-collapse: collapse; }
li { display: table-row; }
.list > li > div { display: table-cell; border: 1px solid #888; padding: 5px; font-size: 16px; vertical-align: middle; }

.head > div { font-style: italic; color: #544; }
div.desc { width: 20em; }
div.newDesc { padding: 0 !important; }
div.time { width: 5em; }
div.deleteTd { text-align: center; color: red; width: 1.5em; }
.newDesc input { border: none; height: 100%; width: 20em; font-size: 16px; padding: 5px; }
.deleteTd button { border: 0; padding: 0; margin: 0; font-size: 16px; color: red; width: 100%; }
.deleteTd button:active { -webkit-transform: scale(1.25); transform: scale(1.25); }