JSFiddle - React, Tailwind, and code Playground
HTML
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
<div class="container py-5">
<div class="row">
<div class="col">
<ul class="list-group forum">
<li class="list-group-item bg-custom-light2 py-4">
<div class="row">
<form class="col-5">
<div class="form-group">
<div class="input-group">
<div class="input-group-prepend">
<span class="input-group-text search-icon"><i class="fa fa-search"></i></span>
</div>
<input type="email" class="form-control search-input" id="exampleInputEmail1"
aria-describedby="emailHelp" placeholder="Search">
</div>
</div>
</form>
<div class="col-7 text-right">
<div class="dropdown filters">
<a class="dropdown-toggle" id="dropdownMenuButton" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Filter 1
</a>
<div class="dropdown-menu" aria-labelledby="dropdownMenuButton">
<a class="dropdown-item" href="#">item1</a>
</div>
</div>
<div class="dropdown filters">
<a class="dropdown-toggle" id="dropdownMenuButton" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Filter 2
</a>
<div class="dropdown-menu" aria-labelledby="dropdownMenuButton">
<a class="dropdown-item" href="#">item1</a>
</div>
</div>
</div>
</div>
</li>
<li class="list-group-item">list item 1</li>
<li class="list-group-item">list item 2</li>
<li class="list-group-item bg-custom-light2 py-4">container...
CSS
.bg-custom-light2{
background-color: #fafafa;
}
.form-group {
margin-bottom: 0!important;
}
.row{
align-items:center;}
.input-group-text{
color:gray;
}
.filters{
display: inline-block;
}
.search-icon{
background-color: #ffffff !important;
border: 1px solid #ced4da !important;
border-right: 1px solid transparent !important;
}
.search-input{
border-left: 1px solid transparent !important;
}