Search bar and search button aren't the same height

Question

I'm making a search bar to sit on a site. Here's the code for the google search bar;

.search {
    display: inline-block;
    height: auto;
    width: 100%;
    position: sticky;
    top: 10vh;
    padding-bottom: 2.5vh;
}

input[type=text], select {
    width: 50vw;
    padding: 2vh 4vh;
    margin: 1vh 0.5;
    display: inline-block;
    border: solid 0.5vh #000000;
    border-radius: 2vh;
    box-sizing: border-box;
    vertical-align: bottom;
}

.button {
    min-width: 5vw;
    padding: 2vh 4vh;
    margin: 1vh 0.5;
    display: inline-block;
    border: solid 0.5vh #000000;
    border-radius: 2vh;
    box-sizing: border-box;
    color: #000000;
    background-color: #ffffff;
    text-align: center;
    text-decoration: none;
    font-size: 16px;
    cursor: pointer;
    vertical-align: bottom;
}

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<div class="search">
<form action="https://www.google.com/search" class="searchform" method="get" name="searchform" target="_self">
<input type="text" autocomplete="on" class="form-control search" name="q" placeholder="Search Google." type="text" autofocus>
<button class="button" type="submit"><i class="fa fa-search" style="text-shadow: none;"></i></button>
</form>
</div>
<br>

The search bar and the search button should end up always being the same height no matter how the window is resized or scaled. They're both aligned to the bottom so have the same starting point. I just don't know how to get them to be the same height.

Any help would be appreciated.

Thanks in advance :)

Answer 1

Method 1 ) insert font-size:16px for input[type=text](same font-size for button) like this:

input[type=text], select {
    font-size: 16px;
   //Other codes...
}

.search {
    display: inline-block;
    height: auto;
    width: 100%;
    position: sticky;
    top: 10vh;
    padding-bottom: 2.5vh;
}

input[type=text], select {
    width: 50vw;
    padding: 2vh 4vh;
    margin: 1vh 0.5;
    display: inline-block;
    border: solid 0.5vh #000000;
    font-size: 16px;
    box-sizing: border-box;
    vertical-align: bottom;
}

.button {
    min-width: 5vw;
    padding: 2vh 4vh;
    margin: 1vh 0.5;
    display: inline-block;
    border: solid 0.5vh #000000;

    box-sizing: border-box;
    color: #000000;
    background-color: #ffffff;
    text-align: center;
    text-decoration: none;
    font-size: 16px;
    cursor: pointer;
    vertical-align: bottom;
}

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<div class="search">
<form action="https://www.google.com/search" class="searchform" method="get" name="searchform" target="_self">
<input type="text" autocomplete="on" class="form-control search" name="q" placeholder="Search Google." type="text" autofocus>
<button class="button" type="submit"><i class="fa fa-search" style="text-shadow: none;"></i></button>
</form>
</div>

Method 2 ) use of line-height :

input[type=text], select {
    line-height: 16px;
    //Other codes...
}

.button {
    line-height: 8px;
    //Other codes...
}

.search {
    display: inline-block;
    height: auto;
    width: 100%;
    position: sticky;
    top: 10vh;
    padding-bottom: 2.5vh;
}

input[type=text], select {
    width: 50vw;
    padding: 2vh 4vh;
    margin: 1vh 0.5;
    display: inline-block;
    border: solid 0.5vh #000000;
    box-sizing: border-box;
    vertical-align: bottom;
    line-height: 16px;
}

.button {
    min-width: 5vw;
    padding: 2vh 4vh;
    margin: 1vh 0.5;
    display: inline-block;
    border: solid 0.5vh #000000;
    box-sizing: border-box;
    color: #000000;
    background-color: #ffffff;
    text-align: center;
    text-decoration: none;
    cursor: pointer;
    vertical-align: bottom;
    font-size: 16px;
    line-height: 8px;
}

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">

<div class="search">
<form action="https://www.google.com/search" class="searchform" method="get" name="searchform" target="_self">
<input type="text" autocomplete="on" class="form-control search" name="q" placeholder="Search Google." type="text" autofocus>
<button class="button" type="submit"><i class="fa fa-search" style="text-shadow: none;"></i></button>
</form>
</div>
<br>

Answer 2

Try display: flex on your .searchform element. This works because the children inherit the default properties of displaying in a row, not wrapping to multiple rows, and stretching to fit. You can read up on flexbox here (I know I do!).

It's a little less elegant than you might hope, perhaps, as you will have to give your searchbar a little margin-right to get the spacing.

.searchform {
  display: flex;
}

.search {
    display: inline-block;
    height: auto;
    width: 100%;
    position: sticky;
    top: 10vh;
    padding-bottom: 2.5vh;
}

input[type=text], select {
    width: 50vw;
    padding: 2vh 4vh;
    margin: 1vh 0.5;
    display: inline-block;
    border: solid 0.5vh #000000;
    border-radius: 2vh;
    box-sizing: border-box;
    vertical-align: bottom;
    margin-right: 5px;
}

.button {
    min-width: 5vw;
    padding: 2vh 4vh;
    margin: 1vh 0.5;
    display: inline-block;
    border: solid 0.5vh #000000;
    border-radius: 2vh;
    box-sizing: border-box;
    color: #000000;
    background-color: #ffffff;
    text-align: center;
    text-decoration: none;
    font-size: 16px;
    cursor: pointer;
    vertical-align: bottom;
}

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<div class="search">
<form action="https://www.google.com/search" class="searchform" method="get" name="searchform" target="_self">
<input type="text" autocomplete="on" class="form-control search" name="q" placeholder="Search Google." type="text" autofocus>
<button class="button" type="submit"><i class="fa fa-search" style="text-shadow: none;"></i></button>
</form>
</div>
<br>