Problem placing a customized select-box next to a searchbar in html - html

Question

I have created both a select-box and a searchbar in html. Now I want to place both elements next to each other. I thought this would be possible by placing both elements into another div-container with display set to inline. But this doesn't really solve the issue.
.select-search-container {
display: inline;
}
.select-box {
display: flex;
flex-direction: column;
width: 400px;
}
.search-bar {
max-width: 400px;
border: none;
position: relative;
box-sizing: border-box;
left: calc(98% - 400px);
top: 20px;
}
#searchBarInput {
background: transparent;
padding: 12px 24px;
border-radius: 8px;
border: 2px solid black;
width: 100%;
box-sizing: border-box;
}
.search-bar__icon {
position: absolute;
height: 100%;
left: 90%;
top: 25%;
}
<div class="select-search-container">
<div class="select-box">
<div class="options-container">
<div class="option">
<input type="radio" class="radio" name="category" id="apples">
<label for="apples">apples</label>
</div>
<div class="option">
<input type="radio" class="radio" name="category" id="bananas">
<label for="bananas">bananas</label>
</div>
<div class="option">
<input type="radio" class="radio" name="category" id="lemons">
<label for="lemons">lemons</label>
</div>
</div>
<div class="selected">
Pick a fruit
</div>
</div>
<div class="search-bar" id="searchBar">
<input type="text" placeholder="Search Fruit" id="searchBarInput">
<i class="material-icons search-bar__icon">search</i>
</div>
</div>
As you can see, I have created the select-box using radio-buttons. I like the styling of this better than a normal select-box. Basically, I am showing the selected-div all the time and upon clicking on this div, I show the options-container. The display of the select-box is set to flex, with flex-direction column, as I want the options-container to be placed below the selected-div:
I am trying to place the searchbar next to the select-box. For this purpose I am also playing around with the left-, top- etc. specifiers. It doesn't really work though. When changing the display-type of the wrapper from inline to inline-flex, it kind of works, but the size of my searchbar shrinks and the icon isn't placed where I want it to be. I know this is a very specific question. I am very surprised that it doesn't work though and would really appreciate an explanation.

Answer 1

.select-search-container {
display: flex;
justify-content: space-between;
}
.select-box {
}
.search-bar {
max-width: 400px;
border: none;
position: relative;
box-sizing: border-box;
top: 20px;
}
#searchBarInput {
background: transparent;
padding: 12px 24px;
border-radius: 8px;
border: 2px solid black;
width: 100%;
box-sizing: border-box;
}
.search-bar__icon {
position: absolute;
height: 100%;
left: 90%;
top: 25%;
}
<div class="select-search-container">
<div class="select-box">
<div class="options-container">
<div class="option">
<input type="radio" class="radio" name="category" id="apples">
<label for="apples">apples</label>
</div>
<div class="option">
<input type="radio" class="radio" name="category" id="bananas">
<label for="bananas">bananas</label>
</div>
<div class="option">
<input type="radio" class="radio" name="category" id="lemons">
<label for="lemons">lemons</label>
</div>
</div>
<div class="selected">
Pick a fruit
</div>
</div>
<div class="search-bar" id="searchBar">
<input type="text" placeholder="Search Fruit" id="searchBarInput">
<i class="material-icons search-bar__icon">search</i>
</div>
</div>