JSFiddle - React, Tailwind, and code Playground

HTML

<div id="wrapper">
     <h1> Рассчитать стоимость</h1>

    <p>Высота:
        <input value="1" type="text" name="height" class="clacHeight" />
    </p>
    <p>Длина:
        <input value="1" type="text" name="wight" class="clacWight" />
    </p>
    <p>Примерная стоимость:
        <input value="" type="text" name="res" class="res" /> <span>руб.</span>

    </p>
</div>

CSS

body, html, h1, p {
    margin:0;
    padding:0;
    font:18px Verdana, Geneva, sans-serif;
}
h1 {
    font-size:24px;
    margin-bottom:21px;
}
p {
    font-size:17px;
    color:#404040;
    margin-bottom:21px;
}
#wrapper {
    wight:448px;
    height:229px;
    margin:28px 12px;
}
input {
    width:83px;
    height:37px;
    border:1px solid #404040;
    border-radius:5px;
    text-align:center;
    background:#EAEAEA;
}

JavaScript

$(".res").click(function (e) {

    var x = $(".clacHeight").val(),
        y = $(".clacWight").val(),
        z = 10000,
        q = (y/7);
    
    w = (Math.floor(q) == q) ? (q - 1) : Math.floor(q);
    return $(".res").val("").val((x * y + 5000 * w) * z);

});