JSFiddle - React, Tailwind, and code Playground

HTML

<section class="product" id="s2" data-anchor="product">
			<div class="container">
				<h3 class="title">Продукция</h3>
				<div class="product__wrap">

					<div class="product__item">
						<h4 class="product__subtitle">Вода слабый газ</h4>
						<div class="product__inner">
							<p class="product__capacity">0,5 л</p>
							<p class="product__currency">вал</p>
						</div>
						<div class="product__block">
							<button class="product__cart">
								<svg viewBox="0 0 30 30">
									<use xlink:href="#icon-cart" />
								</svg>
							</button>
							<input class="product__count" value="1" data-price="27.00">
							<button class="product__btn product__btn--increment"></button>
							<button class="product__btn product__btn--decrement"></button>
							<p class="product__price">27,00</p>
						</div>
					</div>

					<div class="product__item">
						<h4 class="product__subtitle">Минеральная вода</h4>
						<div class="product__inner">
							<p class="product__capacity">2,0 л</p>
							<p class="product__currency">вал</p>
						</div>
						<div class="product__block">
							<button class="product__cart">
								<svg viewBox="0 0 30 30">
									<use xlink:href="#icon-cart" />
								</svg>
							</button>
							<input class="product__count" value="1" data-price="13.15">
							<button class="product__btn product__btn--increment"></button>
							<button class="product__btn product__btn--decrement"></button>
							<p class="product__price">13,15</p>
						</div>
					</div>
				</div><!--end product__wrap-->
			</div>
		</section>

<section class="basket" id="s4" data-anchor="order">
			<div class="container container--basket">
				<h3 class="title">Заказать</h3>
				<div class="basket__wrap-table">
			        <div class="basket__wrap-title">
			            <h3 class="basket__title">Название</h3>
			            <h3 class="basket__title">Объем</h3>
			            <h3 class="basket__title">Цена</h3>
			            <h3...

CSS

.basket {
	margin-bottom: 120px;
}

.basket__wrap-table {
	overflow-x: auto;
	overflow-y: hidden;
}

.basket .basket__item,
.basket .basket__wrap-title {
	display: flex;
	align-items: center;
	min-width: 830px;
}

.basket .basket__item .basket__title:nth-child(1),
.basket .basket__item .basket__box:nth-child(1),
.basket .basket__wrap-title .basket__title:nth-child(1),
.basket .basket__wrap-title .basket__box:nth-child(1) {
	min-width: 440px;
	max-width: 275px;
	padding-left: 46px;
	padding-right: 20px;
	width: 100%;
}

.basket .basket__item .basket__title:nth-child(2),
.basket .basket__item .basket__box:nth-child(2),
.basket .basket__wrap-title .basket__title:nth-child(2),
.basket .basket__wrap-title .basket__box:nth-child(2) {
	min-width: 170px;
	max-width: 170px;
}

.basket .basket__item .basket__title:nth-child(3),
.basket .basket__item .basket__box:nth-child(3),
.basket .basket__wrap-title .basket__title:nth-child(3),
.basket .basket__wrap-title .basket__box:nth-child(3) {
	min-width: 135px;
	max-width: 135px;
}

.basket .basket__item .basket__title:nth-child(4),
.basket .basket__item .basket__box:nth-child(4),
.basket .basket__wrap-title .basket__title:nth-child(4),
.basket .basket__wrap-title .basket__box:nth-child(4) {
	min-width: 180px;
	max-width: 180px;
}

.basket .basket__item .basket__title:nth-child(5),
.basket .basket__item .basket__box:nth-child(5),
.basket .basket__wrap-title .basket__title:nth-child(5),
.basket .basket__wrap-title .basket__box:nth-child(5) {
	min-width: 200px;
	max-width: 200px;
}

.basket .basket__item .basket__title:nth-child(5),
.basket .basket__item .basket__box:nth-child(6),
.basket .basket__wrap-title .basket__title:nth-child(5),
.basket .basket__wrap-title .basket__box:nth-child(6) {
	min-width: 60px;
	max-width: 60px;
}

.basket__title {
	font-size: 18px;
	line-height: 1.2;
	color: #000000;
	text-transform: uppercase;
	font-weight: normal;
	padding-bottom: 26px;
}

.basket__item {
	width: min-content;
	display:...

JavaScript

$(document).ready(function() {
   $('.basket__input').on('change, input', function() {
     $(this).val(
       $(this).val().replace(/^0|\D/, '') || 1
     );
   })

   $('.basket__input').on('focus', function() {
     $(this).data("before", $(this).val())
   })

   $('input[data-together-input]').on('change, input', function() {
     $('input[data-together-input]').val($(this).val());
   })


   $('.basket__input').on('blur', function() {
     let v = /\d+/.exec($(this).val())
     if (!v || !parseInt(v)) v = $(this).data("before")
     $(this).val(v)
     $(this).trigger('input')
   })

   function InitProduct() {

     //product

     $('.product__item').each(function(i, e) {
       e = $(e);

       let quantity = e.find('.product__count');

       var recount = new RecountProduct({
         summ: e.find('.product__price'),
         quantity: quantity,
         price: e.find('.product__count').attr('data-price'),
         fun: updateTotalSumm,
         decimalSeparator: ','
       })

       quantity.on('input', function() {
         recount.updateSumm();
       })

       e.find('.product__btn--decrement').click(function() {
         recount.update('minus');
       });

       e.find('.product__btn--increment').click(function() {
         recount.update('plus');
       });

       recount.updateSumm(false);
     });


     //basket

     $('.basket__item').each(function(i, e) {
       e = $(e);

       let quantity = e.find('.basket__input');

       var recount = new RecountProduct({
         summ: e.find('.basket__sum span'),
         quantity: quantity,
         price: e.find('.basket__input').attr('data-price'),
         fun: updateTotalSumm,
         decimalSeparator: ','
       })

       quantity.on('input', function() {
         recount.updateSumm();
       })

       e.find('.basket__arrow--decrement').click(function() {
         recount.update('minus');
       });

       e.find('.basket__arrow--increment').click(function() {
        ...