I have set up an HTML document that features a collection of buttons enclosed within a DIV id labeled 'buttons'. My objective is to introduce a sort by button into the mix without disrupting the current layout. I attempted to achieve this goal by creating a new DIV id inside 'buttons', but unfortunately, the sort button ended up appearing on top of the other buttons rather than alongside them as intended.
My aim is to seamlessly integrate the sort button into the existing elements without causing any movement in the placement of the other buttons. Can someone guide me on how to accomplish this task?
Below is a snippet of the code for reference:
<div id="buttons">
<div id="sort-by-buttons">
<select name="sort-by" id="sort-by">
<option value="all">All</option>
<option value="name">Name</option>
<option value="price">Price</option>
</select>
</div>
<button class="button-value" onclick="filterProduct('all')">All</button>
<button class="button-value" onclick="filterProduct('jacket')">Jacket</button>
</div>