Overlay a div on top of a input element

Question

I have a div that contains all these elements:

<div id="container">
  <input type="text" />
  <div id="click"></div>
</div>

I want to style this in a way so that the div with id=click will be in the right corner of the input element.

The CSS I applied to text is:

text-align: left;
width: 400px;

In my click div I have:

width: 30px;
height: 30px;

Essentially it would look like this:

[____INPUT___________________{DIV}]

I am not sure how to style the div in order to position it over the input element. Right now it is lying directly to the right of it.

Answer 1

You can use position:absolute for the div#click to control it but make sure the #container has position:relative

JS Fiddle

#container{
  margin:0 auto;
  width:300px;
  position:relative;
  outline:2px solid #060;
}
#container #click{
  width:40px;
  line-height:36px;
  background-color:#090;
  color:white;
  text-align:center;
  position:absolute;
  right:0;
  top:0;
}
#container input[type="text"]{
  width:298px;
  height:30px;
  padding:right:40px;
}

<br>
<div id="container">
  <input type="text" />
  <div id="click">GO</div>
</div>