JSFiddle - React, Tailwind, and code Playground

HTML

<body class="frow f-cnt">
  <input type="search" class="header_nav_search" placeholder="Поиск...">
  <button class="header_nav_button_search"></button>
</body>

CSS

.header_nav_button_search {
  border: none;
  height: 30px;
  width: 100%;
  max-width: 30px;
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
  background-image: url('https://s1.iconbird.com/ico/0912/Radium/w256h2561348762832Search.png');
  margin: 0 0 0 10px;
}

.frow {
  display: flex;
  flex-direction: row;
}

.fcol {
  display: flex;
  flex-direction: column;
}

.f-cnt {
  align-items: center;
  justify-content: center;
}

JavaScript

$(document).ready(function()
{
  $('.header_nav_button_search').on('click', function()
  {
    console.log('test');
  });
  $('.header_nav_search').on('keyup', function(e)
  {
    var len = $(this).val().length;
    if ((e.key == 'Enter') && (len != 0)) {
      $('.header_nav_button_search').trigger('click');
    }
  });
});