Hello,

I've got an input field inside a div like this:

Click image for larger version. 

Name:	empty search bar.jpg 
Views:	59 
Size:	3.4 KB 
ID:	6220

The user is permitted to add search tags to the input field like this:

Click image for larger version. 

Name:	search bar with tags - single line.jpg 
Views:	53 
Size:	4.5 KB 
ID:	6221

The search tags aren't REALLY added to the input field. They are added to an overlay div that's positioned exactly overtop the div containing the input field. When the user adds enough search tags to warrant wrapping them to a new line, the height of the input field increases like this:

Click image for larger version. 

Name:	search bar with tags - double line.jpg 
Views:	51 
Size:	6.5 KB 
ID:	6222

Currently, we are doing this manually (i.e. through Javascript). When a new tag is added and needs to wrap to the next line, we increase the height of the two divs (the overlay and the one containing the input field) and also the input field itself.

It would be much more convenient if I could program the input field or the div containing the input field to automatically increase the height of the input field to take up the full height of its div. In other words, set the input field to ALWAYS take up the full height of its div.

How can I do this?