JSFiddle - React, Tailwind, and code Playground

HTML

<section class="task-list">
    <ul data-bind="foreach:filteredRecords">
        <li>
            <label data-bind="text:TaskName"></label>
            <span data-bind="text:Description"></span>              
        </li>
    </ul>
</section>

CSS

ul {
    list-style: none;
}
li {
    display:table-row;
}
label {
    display:table-cell;
    width:80px;
}
span {
    display:table-cell;
    font-weight:bold;
}

JavaScript

var viewModel = {

    searchText : ko.observable(''),
    taskData : ko.observableArray([
        {TaskName: "First", Description: "One" },
        {TaskName: "Next", Description: "Two" },
        {TaskName: "Last", Description: "Three" }
    ]),
    
    filteredRecords: ko.computed(function() {
        var me = this;
        return function () {
            return me.taskData();
        }
    },this).extend({ throttle: 500 })
};
            
ko.applyBindings(viewModel);