Solution 1 :

Just put them inside one div and set the display property of this div to a grid or flex;
and to specify the space:
if grid: use grid-column-template and use the fr or fix pixels (whatever you prefer).
if flex: use flex-grow / flex-shrink / or just fixed pixels.

Actually, there are so many ways to do it but those options are the easiest.

Problem :

HTML Code

   <select class="dropdown" id="alphalist">   
     <option value="a">A</option>   
     <option value="b">B</option>
     <option value="c">C</option>
   </select> <br/> <br/>
 
   <div class="search_bar">
     <input class="search_nav" type="text" placeholder="Search..."/>        
     <span class="fa fa-search"></span>   
   </div>

CSS

 .dropdown { width: 30px;     /* customize Select tag(DropDown options) with id="alphalist" */
             display: inline-block;
             background-color: #F5F5F5;
             border-radius: 10px;
             outline: none;
             transition: all .5s ease;
             position: relative;
             vertical-align: center;
             font-size: 15px;
             color: black;
             height: 30px;
           } 

 input { border: 0;
         background-color: #F5F5F5;
         border-radius: 10px;
         -webkit-appearance: none;
         -moz-appearance: none;
         -ms-appearance: none;
         -o-appearance: none;
         appearance: none;
         text-align: left;
         width: 100%;
         height: 32px;        
       }

So here I created a drop down list with option A, B and C. Then a search bar is created and also added a search icon.

CSS codes are written to customize both drop down list and search bar.

Now I need the drop down list to be placed inside the search box on left side and search button to be placed on right side. So at end it should almost look like:
This is a picture just from the internet. Please help me.

Thanks for reading.

By

Leave a Reply

Your email address will not be published. Required fields are marked *