Having trouble positioning a search box on the left and arrows on the right side of a container. The float property isn't working as expected and the arrows are too close to the search box. I've also tried using left:0px and right:0px but no luck. Any suggestions on how to solve this? Thanks!
.candidate {
display: flex;
width: 100%;
}
.candidate-search {
width: 50%;
float: left;
}
.pagearrow {
display: flex;
float: right;
}<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
<div class="col-xl-7 col-lg-7 col-md-7">
<div class="conatiner-fluid">
<div class="row">
<div class="candidate">
<div class="candidate-search">
<input class="filter-searchbox py-2" type="search" name="search" placeholder="Search" />
</div>
<div class="pagearrow">
<span class="material-icons">arrow_back_ios</span>
<span class="material-icons">arrow_forward_ios</span>
</div>
</div>
</div>
</div>
</div>