JSFiddle - React, Tailwind, and code Playground

HTML

<div class="horse"><a href="#">
    <div class="onse"><p>ПОКУПКА 300 КЛЮЧЕЙ</p></div>
    <div class="prc"><p>1650<sup> руб. </sup></p></div>
    </a></div>

CSS

.onse {
width: 233px;
height: 50px;
background-color: #3bbfff;
margin-top: 12px;
border-radius: 0px 0px 0px 3px;
}

.onse:hover {
width: 233px;
height: 50px;
background-color: #ffbd20;
margin-top: 12px;
border-radius: 0px 0px 0px 3px;
}

.onse > p {

height: 14px;
color: white;
font-family: 'PlayBold', sans-serif;
font-size: 15px;
font-weight: 700;
line-height: 20px;
margin-left: 30px;
}

.prc {
width: 127px;
height: 50px;
background-color: #2bb0f1;
float: right;
margin-top: -50px;
border-radius: 0px 0px 3px 0px;
text-align: center;
}
.prc:hover {
width: 127px;
height: 50px;
background-color: #ffb300;
float: right;
margin-top: -50px;
border-radius: 0px 0px 3px 0px;
text-align: center;
}

.prc > p {
height: 20px;
color: white;
font-family: 'PlayBold', sans-serif;
font-size: 25px;
font-weight: 700;
line-height: 0px;
}
.horse:hover .onse {background-color: red;}
.horse:hover .prc {background-color: blue;}