<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 используется тогда, когда нет более подходящих семантических тегов.
Этого кода мало но его достаточно чтобы чтобы он хоть что то дал, хоть маленький откликт.
Я смотрю изображения. На них нет 3 между 1 и 2. Но обоих скринах идет 1, 2 потом 3. Т.е. 1 и 2 легко объединяются оберткой.
Но если нужно поменять, то в теории есть display contents, но это не поможет вашему клиенту с его древним компом.