<form class="search-form" action="" method="get">
<label class="visually-hidden" for="search">Поиск товаров</label>
<input class="search-engine" id="search" type="search" placeholder="Поиск товаров">
<button class="button" type="submit">Найти</button>
</form>.search-form {
display: flex;
/* при необходимости свойства флекса для выравнивания */
gap: 20px;
}
.search-engine {
font-size: 15px;
color: #000;
}
.search-engine::placeholder {
color: #808080;
}
.visually-hidden {
position: fixed;
transform: scale(0);
}b или h3, то нужно читать текст, который написан в макете и в этом месте и вообще в блоке. h.<p><b></b></p> или <b></b> встает вопрос, а зачем там вообще второй b. Дальше логический круг: b это часть строки (p, li, h, dt или других тегов), но конструкция <p><b></b></p> избыточна, от b можно просто избавиться, оставив p.b используется тогда, когда нет более подходящих семантических тегов.
Этого кода мало но его достаточно чтобы чтобы он хоть что то дал, хоть маленький откликт.
Перестроишь.
Для этого есть display contents.
Но повторю, что разумно решать эту задачу гридами, а не костылями.