Чтобы связать формы в div ⇐ CSS

[Anonymous]

В настоящее время я заканчиваю курс и мне нужно сделать дубликат страницы поиска Google с функциональной панелью поиска, используя исключительно HTML и CSS. Я изо всех сил пытаюсь связать форму ввода текста с формой ввода отправки, чтобы они были связаны и работали правильно - чтобы при отправке соответствующий поисковый запрос приводил к результатам поиска Google.
Вот что Я пробовал в html

Код: Выделить всё

*,
*::before,
*::after {
box-sizing: border-box;
}

body {
background-color: white;
font-family: Arial, Helvetica, sans-serif;
color: #202124;
margin: 0;
}

a {
color: #202124;
text-decoration: none;
}

header {
width: 100%;
height: 60px;
padding: 6px;
}

header a:hover {
text-decoration: underline;
}

.topNav {
height: 48px;
font-size: 14px;
display: flex;
justify-content: flex-end;
gap: 15px;
padding: 15px;
}

.logobox {
width: 100%;
height: 290px;
display: flex;
justify-content: center;
flex-direction: column;
align-items: center;
}

.logo {
height: 92px;
margin-top: auto;
}

.textonlogo {
position: relative;
color: #4285f4;
font-size: 16px;
bottom: 35px;
left: 105px
}

main {
width: 100%;
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
font-size: 14px;
padding: 20px;
}

.searchBar {
box-sizing: border-box;
display: flex;
border: 1px solid rgb(223, 225, 229);
font-size: 14px;
border-radius: 24px;
width: 582px;
min-height: 44px;
padding-left: 45px;
}

.searchBar:hover {
box-shadow: 0px 1px 3px 1px rgb(223, 225, 229);
}

.searchBar:focus {
outline: none;
}

.underSearch {
height: 70px;
padding-top: 18px;
}

.buttonA {
height: 36px;
border: 1px solid rgb(248, 249, 250);
background-color: rgb(248, 249, 250);
border-radius: 4px;
font-size: 14px;
font-weight: 440;
padding: 0px 16px;
margin: 0px 4px;
}

.buttonA:hover {
border-color: rgb(223, 225, 229);
box-shadow: 0px 0.1px 0.5px;
}

Код: Выделить всё

[url=image-search.html]Google Images[/url]
[url=advanced-search.html]Advanced Search[/url]



[img]logo.png[/img]






Google Search
[url=https://doodles.google]I'm Feeling Lucky[/url]

Источник: https://stackoverflow.com/questions/781 ... ms-in-divs