JSFiddle - React, Tailwind, and code Playground

by Kiran Duggal

HTML

<div class="output-total-price"></div>
<br>
<br>
<input class="checkout-input-quantity" value="10">
<input class="checkout-input-price" value="10">
<br>
<br>
<div class="all-width-same">1</div>
<br>
<br>
<div class="checkOutDetailsRightVolume " id="output-total-price-<%= model.article_id %>">
    <span class="output-total-price all-width-same"></span>
    <span class="currency-code-span">EUR</span>

</div>

CSS

.currency-code-span {
    float:right;
    padding-left:5px;
}
.checkOutDetailsRightVolume {
    min-width:100px;
    float:left;
}
.all-width-same {
    border: solid 1px red;
    min-width:80px;
    text-align: right;
    float:left;
}
.output-total-price {
    border: solid 1px green;
    width:auto;
    float:left;
}
.checkout-input-quantity, .checkout-input-price {
    width:55px;
}

JavaScript

$(document).ready(function () {
    calcl();

    function totalPriceWidthDiv() {
        var totalPriceDivWidth = $(".output-total-price").width();
        var allDivSameWidth = $(".all-width-same");
        $(allDivSameWidth).animate({
            width: totalPriceDivWidth + 'px'
        }, 100);
        /* $(priceWidth).css('width', total + 'px');*/
        console.log(totalPriceDivWidth);
    }

    function calcl() {
        var checkoutIputQuantity = $(".checkout-input-quantity").val();
        var checkoutInputPrice = $(".checkout-input-price").val();
        var checkoutTotalPrice = checkoutIputQuantity * checkoutInputPrice;
        $(".output-total-price").text(checkoutTotalPrice); // sets the total price input to the quantity * price}

    }

    $('.checkout-input-quantity').keyup(function () {
        calcl();
        totalPriceWidthDiv();
        var checkoutIputQuantityLength = ($(".checkout-input-quantity").val().length);
        if (checkoutIputQuantityLength > 12) {
            $(".checkout-input-quantity").css('width', '84px');
            console.log('if quantity');
        } else {
            console.log('else quantity');
            $(".checkout-input-quantity").css('width', '55px');
        }
    });

    $('.checkout-input-price').keyup(function () {
        calcl();
        totalPriceWidthDiv();
        var checkoutInputPriceLength = ($(".checkout-input-price").val().length);
        if (checkoutInputPriceLength > 12) {
            $(".checkout-input-price").css('width', '84px');
        } else {
            console.log('else price');
            $(".checkout-input-price").css('width', '55px');
        }
    });

});