Display 2 dropdown lists next to each other - html

Question

I have 2 drop down ol next to each other, but when the first one is clicked, it brings the second one down with it instead of leaving it at the top.
I can't use position: absolute with either of them as there will be content at the bottom that needs to be pushed down when the drop down is active.
This is the code I have
HTML
<div id="lists">
<div id="list_one">
<a>List One</a>
<ol>
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
<li>Item 4</li>
<li>Item 5</li>
<li>Item 6</li>
<li>Item 7</li>
<li>Item 8</li>
</ol>
</div>
<div id="list_two">
<a>List Two</a>
<ol>
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
<li>Item 4</li>
<li>Item 5</li>
<li>Item 6</li>
<li>Item 7</li>
<li>Item 8</li>
</ol>
</div>
</div>
CSS
#lists {
border: 2px solid blue;
position: relative;
width: 300px;
}
#list_one {
width: 100px;
border: 2px solid red;
}
#list_one ol {
display: none;
}
#list_two {
width: 100px;
border: 2px solid green;
position: relative;
top: -25px;
left: 200px;
}
#list_two ol {
display: none;
}
jQuery
$('#list_one a').click(function(){
$('#list_one ol').toggle();
});
$('#list_two a').click(function(){
$('#list_two ol').toggle();
});
jsfiddle: https://jsfiddle.net/e3tctuzp/

Answer 1

Float the two lists left and right within the container, and then set the display of the container to inline-block.
So the CSS for the lists would be:
#lists {
border: 2px solid blue;
position: relative;
width: 300px;
display:inline-block
}
#list_one {
width: 100px;
border: 2px solid red;
float:left;
}
#list_two {
width: 100px;
border: 2px solid green;
position: relative;
float:right;
}
See jsfiddle

Answer 2

Instead of setting the list positions as relative, you could make them float. For that to work you need to set overflow: auto in your #lists, though. You can then float list one to the left and list two to the right. It would look something like this:
#list_one {
...
float: left;
}
#list_two {
...
float: right;
}
#lists {
overflow: auto;
}
Here is your edited fiddle: https://jsfiddle.net/e3tctuzp/2/