JSFiddle - React, Tailwind, and code Playground

HTML

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Движение картинок за курсором</title>
  </head>
  <body>
    <div class="titles">
      <div class="titles__item">Двигатель</div>
      <div class="titles__item">Логотип</div>
      <div class="titles__item">Охлаждение</div>
      <div class="titles__item">Аккумулятор </div>
      <div class="titles__item">Стоимость</div>
    </div>
    <div class="values">
      <div class="values__item" data-price="100" onclick="addPrice(this)"></div>
      <div class="values__item" data-price="300" onclick="addPrice(this)"></div>
      <div class="values__item" data-price="500" onclick="addPrice(this)"></div>
      <div class="values__item" data-price="700" onclick="addPrice(this)"></div>
      <div class="values__item price">0₽</div>
    </div>
  </body>
</html>

CSS

body {
  display: inline-flex;
  flex-direction: column;
}
.titles {
  display: inline-flex;
  border-top: 1px solid black;
  border-left: 1px solid #000;
}
.titles__item {
  height: 40px;
  width: 100px;
  display: flex;
  align-items: center;
  justify-content:  center;
  border-right: 1px solid black;
}

.values {
  display: inline-flex;
  border-top: 1px solid black;
  border-left: 1px solid black;
  border-bottom: 1px solid black;
}
.values__item {
  height: 40px;
  width: 100px;
  display: flex;
  align-items: center;
  justify-content:  center;
  border-right: 1px solid black;
}
.values__item:hover {
  cursor:pointer;
}

JavaScript

let price = 0
const priceDiv = document.querySelector('.price')

function addPrice(elem) {
  if (elem.innerText) {
    elem.dataset.select = "false"
    elem.innerText = ""
    price -= Number(elem.dataset.price)
    priceDiv.innerText = price + "₽"
  } else {
    elem.dataset.select = "true"
    elem.innerText = "Да"
    price += Number(elem.dataset.price)
    priceDiv.innerText = price + "₽"
  }
}