Currently, I am developing a responsive app and I am facing the challenge of making some parts of the search bar responsive while keeping others fixed in width (like the search icon).
I attempted to achieve this using the following code:
.wrapper{
width:80%;
height:auto;
border-bottom:solid 5px red;
}
.solid{
width:50px;
height:50px;
background-color:green;
}
.responsiv{
width:100%;
height:50px;
background-color:yellow;
}<div class="wrapper">
<div class="solid"></div>
<div class="responsiv"></div>
</div>However, my desired outcome is for the search bar to appear similar to this, but with a responsive design:
.wrapperWant{
width:912px;
height:auto;
border-bottom:solid 5px red;
}
.solidWant{
width:50px;
height:50px;
background-color:green;
float:left;
}
.responsivWant{
float:left;
width:862px;
height:50px;
background-color:yellow;
}
.clear{
clear:both;
}<div class="wrapperWant">
<div class="solidWant"></div>
<div class="responsivWant"></div>
<div class="clear"></div>
</div>