Replace a Dropdown Menu with a textbox in a responsive template - html

Question

I would like to replace a Dropodown Menu with a textbox in a search form.
The textbox must have the same size of the replaced Dropdown Menu.
Code of the form:
<form action="#">
<input type="text" class="form-control" placeholder="Type your key word">
<div class="dropdown category-dropdown">
<a data-toggle="dropdown" href="#"><span class="change-text">Job Location</span> <i class="fa fa-angle-down"></i></a>
<ul class="dropdown-menu category-change">
<li>Location 1</li>
<li>Location 2</li>
<li>Location 3</li>
</ul>
</div><!-- category-change -->
<button type="submit" class="btn btn-primary" value="Search">Search</button>
</form>
Style:
.category-dropdown {
background-color: #fff;
border-right: 1px solid #e6e6e6;
border-radius: 5px 0px 0px 5px;
min-width: 200px;
line-height: 45px;
text-align: left;
padding: 0 20px;
}
Anyway, here there is the link of the template:
https://demo.themeregion.com/jobs-updated/
Maybe it's a trivial question, but I'm new with the css technical since I'm a backend developer.

Answer 1

A simple way would be something like this, in place of <div class="dropdown category-dropdown">:
<input type="text" class="form-control category-textbox" placeholder="Type your key word">
Style:
.category-textbox{
width: 20%;
min-width: 20%;
}