JSFiddle - React, Tailwind, and code Playground

HTML

<h1>Каталог запчастин</h1>

<div class="block1">

  <img src="zap.jpg" width="320" height="235">
  <div class="description">
    <p class="text">Міст МТЗ-82</p>
    <p class="text1">Ціна: 1600 <a href="#" class="knopka">Замовити</a></p>
  </div>

</div>

CSS

* {
  box-sizing: border-box;
}

.block1 {
  display: flex;
  width: 700px;
  background: white;
  padding: 20px;
  border: solid 4px grey;
  border-radius: 15px;
  border-spacing: 111px;
  margin-top: 10px;
  margin-bottom: 10px;
}

img {
  margin-right: 2em;
}

.text {
  font-size: 150%;
}

.text1 {
  padding-top: 1px;
  color: red;
  font-size: 150%;
}

.knopka {
  display: inline-block;
  color: #fff;
  /* цвет текста */
  text-decoration: none;
  /* убирать подчёркивание у ссылок */
  user-select: none;
  /* убирать выделение текста */
  background: rgb(212, 75, 56);
  /* фон кнопки */
  padding: .7em 1.5em;
  /* отступ от текста */
  outline: none;
  /* убирать контур в Mozilla */
  font-size: 0.66em;
}

.knopka:hover {
  background: rgb(232, 95, 76);
}


/* при наведении курсора мышки */

.knopka:active {
  background: rgb(152, 15, 0);
}


/* при нажатии */