JSFiddle - React, Tailwind, and code Playground

HTML

Price:
<input type="textbox" data-bind="value: Price" />
<br />Percent:
<input type="textbox" data-bind="value: Percent" />
<!-- <label data-bind="html: TaxAmt"></label> -->
<br />Left:
<input type="textbox" data-bind="value: Deposit" />

JavaScript

function viewModel() {
    var self = this;
    
    self.Price = ko.observable(1000);
    
    self.Percent = ko.observable(50);

    self.Deposit = ko.computed({
        read: function() {
        			console.log(`Price: ${self.Price()}, Percent: ${self.Percent()}`);
               return parseFloat(self.Price() / 100) * parseFloat(self.Percent());
        },
        write: function(val){
                var onePercent = parseFloat(self.Price() / 100);
                var percent = val / onePercent;
                self.Percent(percent);
        }
    });
}

ko.applyBindings(new viewModel());