Can anyone assist me with setting the input field width in my navbar to adjust to the remaining width of the navbar and be responsive to different device sizes? I need the input field to dynamically change its width based on the screen size. Any help would be greatly appreciated.
li {
list-style: none;
}
.post-edit .nav-header {
border: 1px solid #ddd;
height: 40px;
}
.post-edit .nav-header ul li button {
border: 1px solid #727272;
background-color: #fff;
color: #727272;
font-size: 14px;
padding: 3.5px 8px;
border-radius: 3px;
margin-top: 5.3px;
}<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<body>
<div class="container-fluid p-0">
<!-- Main Container -->
<main class="container-wrapper">
<div class="post-edit">
<form action="" method="post">
<div class="nav-header navbar navbar-expand-sm">
<!-- Left -->
<ul class="navbar-nav">
<li class="nav-item">
<input type="text" name="p-title" placeholder="Title">
</li>
</ul>
<!-- Right -->
<ul class="navbar-nav ml-auto">
<li class="nav-item">
<button class="nav-link">Preview</button>
</li>
<li class="nav-item">
<button class="nav-link">Publish</button>
</li>
</ul>
</div>
</div>
</form>
</div><!-- /.post-edit -->
</main> <!-- /Main Container -->
</div>
</body>