JSFiddle - React, Tailwind, and code Playground

HTML

<script src="http://knockoutjs.com/downloads/knockout-2.2.1.js"></script>
<div id="leftPanel">
        <table class="expanded">
            <thead>
                <tr>
                    <th>Names</th>
                    <th>Available</th>
                    <th>Count</th>
                </tr>
            </thead>
            <tbody>

                <!-- ko foreach: Underwriters.slice(1) -->
                <tr>
                    <td data-bind="text: FirstAndLastName"></td>
                    <td><input type="checkbox" /></td>
                    <td data-bind="text: $parent.countAppearancesForUnderwriter"></td>
                </tr>
                <!-- /ko -->

            </tbody>
        </table>
    </div>

    <div id="rightPanel">
        <table class="expanded">
            <thead>
                <tr>
                    <th>Investor</th>
                    <th>High Priority</th>

                    <!-- ko foreach: new Array($root.MaxPriority()) -->
                    <th data-bind="text: 'Priority ' + ($index() + 1)"></th>
                    <!-- /ko -->

                </tr>
            </thead>
            <tbody>

                <!-- ko foreach: Investors -->
                <tr>
                    <td data-bind="text: InvestorName"></td>
                    <td><input type="checkbox" data-bind="attr: {'checked': IsHighPriority}"/></td>

                    <!-- ko foreach: new Array($root.MaxPriority()) -->
                        <td>

                            <select data-bind="options: $root.Underwriters, 
                                                        optionsText: 'FirstAndLastName', 
                                                        optionsValue: 'UserID', 
                                                        value: $root.getUnderwriterAtPosition($parent.InvestorID, $index() + 1)
                                                        "></select>

                        </td>
                    <!-- /ko...

CSS

#leftPanel {
  float: left;
  width: 15%;
}

#rightPanel {
  float: right;
  width: 80%;
}

table.expanded {
  width: 100%;
}

JavaScript

var ManageInvestorsModel = function () {
    var self = this;

    self.isLoaded = false;

    self.MaxPriority = ko.observable(4);
    
    self.Underwriters = ko.observableArray([{FirstAndLastName: "Bob", UserID: 1}, {FirstAndLastName: "Jim", UserID: 2} ]);
    self.Investors = ko.observableArray([{InvestorName: "IV", IsHighPriority: false},{InvestorName: "IV2", IsHighPriority: false}]);

    self.countInvestorsByPriority = function (priority) {
        return ko.computed(function() {
            //code
        });
    };

    self.countAppearancesForUnderwriter = ko.computed(function (x) {
        return 0;
    });

    self.getUnderwriterAtPosition = function (invId, pos) {
        var uniqueSelectInst = ko.observable(function () {
            return 0;
        });

        return uniqueSelectInst;
    };

    self.updateInvestor = function (data, data2) {
        if (!self.isLoaded) return;
    };

    self.Underwriters.unshift({ "FirstAndLastName": "", UserID: 0 });
};

var manageInvestorsModel = new ManageInvestorsModel()
ko.applyBindings(manageInvestorsModel);
manageInvestorsModel.isLoaded = true;