How to center a image next to an input field using flexbox - html

Question

I am attempting to center a image next to an input field although when attempting to do so with vertical-align: bottom; nothing happens and my image is not centered where I want it to be.
I have tried to use position:relative and then move my image using top,bottom etc but I want to do it in a way that uses flexbox.
How would I go about doing this and what divs would I have to change to get the layout I want.
Layout I am trying to achieve:
Jsfiddle
HTML
<div class="container">
<h1>Inputs</h1>
<p class="spacing">multiple inputs...</p>
<div class="searchinput">
<input type="text" name="search" id="google-input" placeholder="Google search...">
<img src="logos/google.png" alt="youtube" class="logos">
</div>
</div>
CSS
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
.logos{
width: 90px;
vertical-align: bottom;
}
.container {
display: flex;
align-items: center;
justify-content: center;
flex-direction: column;
height: 90vh;
}
.searchinput {
margin-top: 20px;
}
input {
padding: 20px;
height: 30px;
background-color: transparent;
border: 2px solid black;
border-radius: 5px;
color: black;
font-size: 20px;
vertical-align: bottom;
}

Answer 1

You need to have the direct parent of the items that you want to have flex properties to have the display:flex property. So in your case it would be the .searchinput. So your .searchinput css should be the following:
.searchinput {
margin-top: 20px;
display:flex;
align-items: center;
}
So here is a snippet of the whole thing:
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
.logos{
width: 90px;
vertical-align: bottom;
}
.container {
display: flex;
align-items: center;
justify-content: center;
flex-direction: column;
height: 90vh;
}
.searchinput {
margin-top: 20px;
display:flex;
align-items: center;
}
input {
padding: 20px;
height: 30px;
background-color: transparent;
border: 2px solid black;
border-radius: 5px;
color: black;
font-size: 20px;
vertical-align: bottom;
}
<div class="container">
<h1>Inputs</h1>
<p class="spacing">multiple inputs...</p>
<div class="searchinput">
<input type="text" name="search" id="google-input" placeholder="Google search...">
<img src="https://i.imgur.com/dpkbGqu.png" alt="youtube" class="logos">
</div>
</div>