I need help with a grid layout. My goal is to have the input tags (marked in blue) shift below when resizing the browser or viewing on a mobile or tablet device, while keeping the other three tags on the same line. I attempted to position the small box to the right without success.
.nav{
max-width: 1500px;
display: grid;
grid-gap: 10px;
grid-template-columns: repeat(auto-fill,minmax(390px,200px));
}
.input{
height: 30px;width: 100%;
margin: 15px 0px;
border: none;border-bottom:3px solid blue;
outline: none;
}
.search.icon {
right: 10px;bottom: 25px;
color: #000;
position: absolute;
margin-top: 2px;
margin-left: 3px;
width: 12px;
height: 12px;
border: solid 1px currentColor;
border-radius: 100%;
-webkit-transform: rotate(-45deg);
transform: rotate(-45deg);
}
.search.icon:before {
content: '';
position: absolute;
top: 12px;
left: 5px;
height: 6px;
width: 1px;
background-color: currentColor;
}<body>
<div class="nav">
<div>
<img style="width: 200px;height: 50px;" src="https://picsum.photos/g/200/300" alt="">
</div>
<div>
<input type="text" class="input">
</div>
<div>
<div style="position: relative">
<span class="search icon" style="position: absolute" class=""></span>
<input type="text" class="input">
</div>
</div>
<div style="display: grid;grid-template-columns: 4fr 1fr">
<div>
<h2 style="text-align: center">login</h2>
</div>
<img style="height: 50px;width: 50px;float: right" src="https://picsum.photos/200/300/?gravity=east" alt="">
</div>
</div>
</body>