Problem placing a customized select-box next to a searchbar in 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.

_"by placing both elements into another div-container with display set to inline."_ - the elements themselves would need to be made inline, not their parent container. — CBroe, Dec 14 '21 at 08:04
oh. ... I can't do that though, because I need the select-box to be display-flex, as it is made up of the selected-div and the options-container. .. — Luk, Dec 14 '21 at 08:07
`inline-flex` exists. https://stackoverflow.com/questions/27418104/whats-the-difference-between-displayinline-flex-and-displayflex — CBroe, Dec 14 '21 at 08:08

score 0 · Answer 1 · answered Dec 14 '21 at 08:44

.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>

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

1 Answers1