I want to make my header like the original olx website. Anyone can show me how I can stretch the search bar like in the original pic?

Issue

I want to stretch my search input field like the original pic. Can anyone show me how I can stretch it to make it the same as the original? I'm using bootstrap and react.js. I have uploaded the original pic and my result pic for reference as well as HTML and CSS code. I have tried many ways but still fail.

Original

My Result

HTML & CSS

.logo {
  width: 50px;
  margin-right: 20px;
}

.logo img {
  width: 100%;
}

.location {}

.location input {
  background-color: #fff;
  border: 2px #002f34 solid;
  border-radius: 5px;
}

.location .ico {
  padding: 10px;
  height: 100% !important;
  background-color: #000 !important;
  color: #fff;
  border: none;
  outline: inherit;
}


.search {}

.search input {
  width: 100px;
  background-color: #fff;
  border: 2px #002f34 solid;
  border-radius: 5px;
}

.search .ico {
  padding: 10px;
  height: 100% !important;
  background-color: #000 !important;
  color: #fff;
  border: none;
  outline: inherit;
}

.sell {
  padding: 8px 20px;
  border: 3px #ffa500 solid;
  color: #002f34;
  text-align: center;
  background: #fff;
  border-radius: 30px;
  box-shadow: 0px 3px 5px #a9a9a9;
}

.login {
  padding-right:10px;
  text-decoration: underline;
  font-size: 18px;
  font-weight: bold;
}

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" integrity="sha384-JcKb8q3iqJ61gNV9KGb8thSsNjpSL0n8PARn9HuZOnIxN0hoP+VmmDGMN5t9UJ0Z" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.1/dist/umd/popper.min.js" integrity="sha384-9/reFTGAW83EW2RDu2S0VKaIzap3H66lZH81PoYlFhbGU+6BZp6G7niu735Sk7lN" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js" integrity="sha384-B4gt1jrGC7Jh4AgTPSdUtOBvfO8shuf57BaghqFfPlYxofvL8/KUEfYiJOMMV+rV" crossorigin="anonymous"></script>
 
 <nav class="navbar navbar-expand-lg navbar-light bg-light">
    <a class="navbar-brand logo" href="#">
        <img src={require("../ui/logo.png")} />
    </a>

    <div class="collapse navbar-collapse" id="navbarSupportedContent">
        <ul class="navbar-nav mr-auto">

            <div class="input-group input-group-lg location mr-4">
                <input type="text" class="form-control" placeholder="Pakistan" />
                <div class="input-group-btn">
                    <button class="fas fa-search ico"></button>
                </div>
            </div>

            <div class="input-group input-group-lg search">

                <input type="text" class="form-control" placeholder="Find Mobile, Car ,laptop" />
                <div class="input-group-btn">
                    <button class="fas fa-search ico"></button>
                </div>
            </div>
        </ul>
        <form class="form-inline my-2 my-lg-0">
            <h6 class="mr-sm-2 login" >Login</h6>
            <button class="my-2 my-sm-0 fas fa-plus sell">&nbsp; SELL</button>
        </form>
    </div>
</nav>

Solution

First thing was to replace your divinto your ul for li.

Then I created the 2 class below:

.flex-1{
  flex: 1;
}
.flex-2{
  flex: 2;
}

To adjust the flex size of the element.

I set flex-2 on ul & second li. And flex-1 on 1st li.

TO Make demo work, I change className by class. So you may need to change them back to make them work.

DEMO (check it full page)

.logo {
  width: 50px;
  margin-right: 20px;
}

.logo img {
  width: 100%;
}

.location {}

.location input {
  background-color: #fff;
  border: 2px #002f34 solid;
  border-radius: 5px;
}

.location .ico {
  padding: 10px;
  height: 100% !important;
  background-color: #000 !important;
  color: #fff;
  border: none;
  outline: inherit;
}


.search {}

.search input {
  width: 100px;
  background-color: #fff;
  border: 2px #002f34 solid;
  border-radius: 5px;
}

.search .ico {
  padding: 10px;
  height: 100% !important;
  background-color: #000 !important;
  color: #fff;
  border: none;
  outline: inherit;
}

.sell {
  padding: 8px 20px;
  border: 3px #ffa500 solid;
  color: #002f34;
  text-align: center;
  background: #fff;
  border-radius: 30px;
  box-shadow: 0px 3px 5px #a9a9a9;
}

.login {
  padding-right:10px;
  text-decoration: underline;
  font-size: 18px;
  font-weight: bold;
}
.flex-1{
  flex: 1;
}
.flex-2{
  flex: 2;
}

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" integrity="sha384-JcKb8q3iqJ61gNV9KGb8thSsNjpSL0n8PARn9HuZOnIxN0hoP+VmmDGMN5t9UJ0Z" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.1/dist/umd/popper.min.js" integrity="sha384-9/reFTGAW83EW2RDu2S0VKaIzap3H66lZH81PoYlFhbGU+6BZp6G7niu735Sk7lN" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js" integrity="sha384-B4gt1jrGC7Jh4AgTPSdUtOBvfO8shuf57BaghqFfPlYxofvL8/KUEfYiJOMMV+rV" crossorigin="anonymous"></script>
 
 <nav class="navbar navbar-expand-lg navbar-light bg-light">
    <a class="navbar-brand logo" href="#">
        <img src={require("../ui/logo.png")} />
    </a>

    <div class="collapse navbar-collapse" id="navbarSupportedContent">
        <ul class="navbar-nav flex-2 pr-3">

            <li class="input-group input-group-lg location mr-4 flex-1">
                <input type="text" class="form-control" placeholder="Pakistan" />
                <div class="input-group-btn">
                    <button class="fas fa-search ico"></button>
                </div>
            </li>

            <li class="input-group input-group-lg search flex-2">

                <input type="text" class="form-control" placeholder="Find Mobile, Car ,laptop" />
                <div class="input-group-btn">
                    <button class="fas fa-search ico"></button>
                </div>
            </li>
        </ul>
        <form class="form-inline my-2 my-lg-0">
            <h6 class="mr-sm-2 login" >Login</h6>
            <button class="my-2 my-sm-0 fas fa-plus sell">&nbsp; SELL</button>
        </form>
    </div>
</nav>

Answered By - MaxiGui