How to display inline a select element after a div? - html

Question

I have these HTML elements:
<div id="div1">
<h2>Search what you want</h2>
<input id="textSearch" type="text" class="form-control input-lg" placeholder="Search" />
</div>
<div id="div2">
<select id="droplist" class="form-control">
<option>Option</option>
</select>
</div>
I am trying to display them inline but I can't find the way to do it. I have searched on SO and applied some of the solutions, like involving both of the elements in a div (div1 and div2) and add in the CSS code something like this:
#div1, #div2
{
display: inline;
}
I have also tried with inline-block and so many other solutions but none of them have worked. Is there a possible way to do it?

Answer 1

You need to make the h2 in div1 inline too:
#div1, #div2, #div1 h2
{
display: inline;
}

Answer 2

You can try:
#div1, #div2 {
display: inline-block;
}
or:
#div1, #div2 {
width: 50%;
float: left;
}
As a side note, please, consider using class names for styling instead of id-s.

Answer 3

Please try this:
HTML:
<div id="disptable">
<div id="disptabcell">
<span>Search what you want:</span>
<input id="textSearch" type="text" class="form-control input-lg" placeholder="Search" />
</div>
<div id="disptabcell">
<select id="droplist" class="form-control">
<option>Option</option>
</select>
</div>
</div>
CSS:
#disptable{display:table}
#disptabcell{display:table-cell}
span{font-size:18px;font-weight:bold}