I'm trying to make a search box on left end and arrows on right end. Float is not working and the arrows are coming very close to search box. Also tried left:0px and right:0px. Could anyone help with this? Thank you.
.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>