How to make a <div> / wrapper taller?

You can do this with padding.
Add this to your css sheet.

.fix {padding-bottom:35px;}

You can adjust the padding to suit.

Except, the text area is absolutely positioned and is clipping the content out. The extra padding padding will help but I’m not so sure this will take into account expanding text?

You might have even better results replacing the #topText value as follows:

#topText {
	width: 65%;
	z-index:1;
	margin: 0;
	background-color: #e0e0e0;
	padding: 10px 35% 10px 0;
}

and for .nav, remove the bg color, and apply the following:

.nav {
	position: absolute;
	top: 0;
	right: 0;
}

This way, the search is absolutely positioned and will remain top-right, but the text content to the left will accommodate varying text sizes / quantities. Compare the two approaches by enlarging the text and you’ll get the idea.

Thank you, that works!