* { box-sizing: border-box; } input[type=text], input[type=number], select, textarea { appearance: none; -webkit-appearance: none; -moz-appearance: none; border-radius: 0px; border: 1px solid #ccc; padding: 10px; font-size: 14px; color: #333; background-color: #f5f5f5; text-align: center; } input[type=text]:focus, input[type=number]:focus, select:focus, textarea:focus,.cost span:active { color:#212529; background-color:#fff; border-color:#86b7fe; outline:0; box-shadow:0 0 0 0 rgba(13,110,253,.25); } [class*="col-"]{ margin-top: 1rem; } .row::after { content: ""; display: table; clear: both; } .input-group label { margin-bottom: 10px; font-weight: normal; text-align: center; align-items: center; } .input-group { display: flex; flex-direction: column; margin-bottom: 10px; text-align: center; } .cost{ display: flex; flex-direction: column; /*flex: 1;*/ } .cost label { margin-bottom: 10px; font-weight: normal; text-align: center; } .cost span { appearance: none; -webkit-appearance: none; -moz-appearance: none; border-radius: 0px; padding: 10px; font-size: 14px; color: #333; background-color: #f5f5f5; text-align: center; border: 1px solid #ccc; } let subtotal = document.getElementById('subtotal'); let cost_per_party = document.getElementById('cost_per_party'); let licence_percentage = 30; let licence_fee = 0; let subtotal_fee = 0; let split_fee = 0; window.onload = calculate; function calculate() { let package = document.getElementById('package').value; let parties = document.getElementById('parties').value; if(parseInt(parties) > 0) { licence_fee = ((parseFloat(package)*licence_percentage)/100) subtotal_fee = (parseFloat(package)+(licence_fee*parseInt(parties))) split_fee = (subtotal_fee/(parseInt(parties)+1)) }else { split_fee = parseFloat(package) subtotal_fee = parseFloat(package) } const formattedSubtotalFee = subtotal_fee.toLocaleString('en-US', { style: 'currency', currency: 'USD', }); const formattedSplitFee = split_fee.toLocaleString('en-US', { style: 'currency', currency: 'USD', }); subtotal.textContent = formattedSubtotalFee cost_per_party.textContent = formattedSplitFee }