Как уменьшить количество пикселей по атрибуту «0» в Jquery

Question

Я хочу, чтобы .card-product-new-tag имел показываемое значение, равное 0, а .card-product-sale-tag, имел показываемое значение, равное 1, тогда .card-product-sale-tag top: -35px и, наконец, имеет верх: 10 пикселей. Таким образом, если у товара нет нового тега, тег продажи сохранит место нового тега.

Как я могу это сделать?

HTML:

<div class="card-product">
    <img class="card-product-img" src="https://via.placeholder.com/1200x1440">
    <img class="card-product-img2" src="https://via.placeholder.com/1201x1441">
    <div class="card-tag card-product-new-tag" show-value="1">YENİ</div>
    <div class="card-tag card-product-sale-tag" show-value="0">İNDİRİM</div>
</div>
<div class="card-product">
     <img class="card-product-img" src="https://via.placeholder.com/1200x1440">
     <img class="card-product-img2" src="https://via.placeholder.com/1201x1441">
     <div class="card-tag card-product-new-tag" show-value="0">YENİ</div>
     <div class="card-tag card-product-sale-tag" show-value="1">İNDİRİM</div>
</div>

CSS:

.card-product-new-tag {
    top: 10px;
}

.card-product-sale-tag {
    top: 45px;
}

Я пробовал это, но не работает:

if ($(".card-product-sale-tag").attr('show-value') == 1 && $(".card-product-new-tag").attr('show-value') == 0) {
    $(".card-product-sale-tag", this).css("top", "10px");//this is not the way I want by the way... I want "top: -35px" and finally "10px".
}

введите описание изображения здесь