Unwanted white space in html to the right of search bar - html

Question

I am trying to make a search bar, with an anchor containing an icon. I'm trying to directly connect the two (button fixed to the right of searchbar) but there is white space not wanting to leave.
.search input [type="search"] {
margin-right: 0;
white-space: nowrap;
}
.search a {
padding: 5px;
border-top-right-radius: 7px;
border-bottom-right-radius: 7px;
margin-left: 0;
}
.search i {
padding: 5px;
}
<div class="search">
<form action="" method="post">
<b>Search by</b>
<input type="checkbox" value="">Male</input>
<input type="checkbox" value="">Female</input>
<input type="search" placeholder="Searchtext">
<i>placeholder</i>
</form>
</div>

Answer 1

The duplicate does apply to your question as inputs are inline-block.
One thing to consider is that your "search" and "button" could be considered a single element. You could group them as such and then apply a float to the elements.
.searchBox {
/*Floats will be relative to this*/
position: relative;
display: inline-block;
}
.searchBox input {
/*Float the input*/
float: left;
}
.search input[type="search"] {
margin-right: 0;
white-space: nowrap;
}
.search a {
padding: 5px;
border-top-right-radius: 7px;
border-bottom-right-radius: 7px;
margin-left: 0;
/*Purely to demonstrate*/
border: solid 1px black;
}
.search i {
padding: 5px;
}
<div class="search">
<form action="" method="post">
<b>Search by</b>
<input type="checkbox" value="" />Male
<input type="checkbox" value="" />Female
<div class="searchBox">
<input type="search" placeholder="Searchtext">
<i>placeholder</i>
</div>
</form>
</div>
You also have a couple of other issues with your code:
input is self closing and shouldn't have a closing tag, note Permitted Content in the docs: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input
You have an unwanted space between input and [type="search"]. This would attempt to match an element with an attribute of search that is a descendant of an input element.
I have addressed these in my code.

Answer 2

I think below code might serve your purpose.
.blockTitle{
padding-right:1em;
font-weight:bold;
}
.search{
display:block;
width:auto;
}
.search form{
display:block;
width:100%;
margin:0;
padding:0;
}
.checkbox + label{
display:inline-block;
padding:0 0.25em;
line-height:1.4em;
}
.searchBoxContainer{
display:block;
width:80%;
position:relative;
padding:0.2em;
}
.searchBoxContainer input[type="search"]{
width:100%;
display:block;
position:relative;
z-index:0;
padding:0 2.5em 0 0;
line-height:inherit;
margin:0;
}
.searchCustomBtn{
position:absolute;
top:0.75em;
right:-2em;
z-index:1;
line-height: 1.5em;
}
<div class="search">
<form action="" method="post">
<span class="blockTitle">Search by</span>
<input type="checkbox" value="" class="checkbox" id="maleChkBx" /><label for="maleChkBx">Male</label>
<input type="checkbox" value="" class="checkbox" id="femaleChkBx" /><label for="femaleChkBx">Female</label>
<div class="searchBoxContainer">
<input type="search" id="searchBox" placeholder="Searchtext">
Search-Icon
</div>
</form>
</div>