I'm having trouble displaying a textbox next to another div on my webpage. Instead of appearing next to the div, it is showing up below it. The textbox needs to have an absolute position. You can see the issue in action by checking out this demo. Thank you.
css
#show{
border:1px solid gray;
cursor:pointer;
float:left;
}
#textBox{
display:none;
position:absolute;
border:1px solid gray;
width:100px;
height:100px;
float:left;
background-color:pink;
}
#hide{
clear:left;
text-align:center;
cursor:pointer;
}
html
<div id = "show">click me to show test box</div>
<div id = "textBox">text</div>
<div id = "hide">hide text box</div>
js
$('#show').click(function(){
$('#textBox').show();
});
$('#hide').click(function(){
$('#textBox').hide();
});