JSFiddle - React, Tailwind, and code Playground

HTML

<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.16/themes/base/jquery-ui.css">
<script src="https://github.com/downloads/SteveSanderson/knockout/knockout-2.0.0.js"></script>
<table border="3" cellpadding="2">
    <tr>
        <th>Item list</th>
        <th>Details</th>
    </tr>
    <tr>
        <td class="list">
            <ul data-bind="foreach: items">
                <li data-bind="text: label, click: $parent.selectedItem"></li>
            </ul>
        </td>
        <td class="detail"  data-bind="with: selectedItem">
            <div>Item: <span data-bind="text: label"></span></div>
            <div>Price: <span data-bind="text: price"></span></div>
        </td>
    </tr>
</table>

CSS

* {
    font-family: sans-serif;
}

table td, table th {
    padding: 4px;
}

table th {
    font-weight: bold;
}

JavaScript

function Item(title, amnt) {
    this.label = ko.observable(title);
    this.price = ko.observable(amnt);
}

var items = [ new Item('foo', 27.30), new Item('fruity foo', 30.12), new Item('foo bar', 12.34)];

function viewModel(list) { 
    this.items = ko.observableArray(list);
    
    this.selectedItem = ko.observable();
}

ko.applyBindings(new viewModel(items));