Position text below a fixed div that grows in height with page width change

I reviewed your topic on Position a div below a fixed div and it functioned as I needed (almost). When I shrink the page the header overlaps my text. I want the text to stay below the header when it grows in height. Below is my php file.
Test.php

<html>
<script>
	$(".text").css("top", $(".title").height() + 10);

	$(window).on("resize", function() { //Make it responsive
	  $(".text").css("top", $(".title").height() + 10);
	});
</script>

<style>
	ul {list-style-type: none;}
	
	a:link,a:visited{color:blue;text-decoration:none;
	-webkit-border-radius: 15px;-moz-border-radius: 15px;
	border-radius: 15px; padding: 10px;}

	a:link.noborder,a:visited.noborder{
	text-decoration:none;}

	a:hover,a:active{background-color:#F7881D;
	color:#ffffff;text-decoration:none;}

	a:hover.noborder,a:active.noborder{
	background-color:transparent;}
	
	html,
	body {
	  height: 500%;
	  width: 100%;
	}

	.container {
	  width: 100%;
	  margin: 0 auto;
	  max-width: 700px;
	}
	.title-wrapper {
	  width: 100%;
	  position: fixed;
	  z-index: 2;

	  /*     higher z-index so it's always in front of text. */
	  top: 0;
	  /* top 0 to cover empty space above it   */
	  background-color: white;
	  /*  white background to hide elements behind it  */
	}
	.title {
	  width: 100%;
	  max-width: 100%;
	}
	.image { margin-top: 10px;
	  width: 100%;
	}
	.image img {
	  width: 100%;
	  height: 100px;
	}
	.text {margin-top: 60px;
	  text-align: center;
	  position: absolute;
	  width: 100%;
	  max-width: 900px;
	}
	h2 {
	  text-align: center;
	  background-color: grey;
	  width: 100%;
	}
	h3 {
	  text-align: center;
	  background-color: green;
	  width: 100%;
	  max-width: 900px;
	}

</style>
<body>
<div class="container">
	<div class="title-wrapper">
		<div class="title">
			<div class="image">
				<!--img src="https://images.pexels.com/photos/47044/aircraft-landing-reach-injection-47044.jpeg?w=1260&h=750&auto=compress&cs=tinysrgb" alt="Plane1"-->
			<span style="color:orange; font-size: 24px; font-weight: bold;">       
			<?php 
				//if (isset($WeekDay)) { 
					$WeekDay = $_GET["WeekDay"];
					$dayName = "All";
					if ($WeekDay=='Sun') $dayName = "Sunday";
					if ($WeekDay=='Mon') $dayName = "Monday";
					if ($WeekDay=='Tue') $dayName = "Tuesday";
					if ($WeekDay=='Wed') $dayName = "Wednesday";
					if ($WeekDay=='Thu') $dayName = "Thursday";
					if ($WeekDay=='Fri') $dayName = "Friday";
					if ($WeekDay=='Sat') $dayName = "Saturday";
					if ($WeekDay=='All') $dayName = "All";
				//} else {
				//    $dayName = "All"; 
				//}
			?>
			<b>
			Viewing -&nbsp;<?php echo $dayName ?>&nbsp;-&nbsp; 
			Find a Place to visit on: 
			</b>
			<br/>
				   <a href="Title.php?WeekDay=Sun">Sunday</a>
				   <a href="Title.php?WeekDay=Mon">Monday</a>
				   <a href="Title.php?WeekDay=Tue">Tuesday</a>
				   <a href="Title.php?WeekDay=Wed">Wednesday</a>
				   <a href="Title.php?WeekDay=Thu">Thursday</a>
				   <a href="Title.php?WeekDay=Fri">Friday</a>
				   <a href="Title.php?WeekDay=Sat">Saturday</a>
				   <a href="Title.php?WeekDay=All">View All</a>
				 </span><br/>
								
							</div>

						</div>
					</div>
					
					<div class="text">
						<div>
							<h3>TEXT 1</h3>
							<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Praesentium veniam consequuntur libero? Explicabo consectetur rerum odit? Qui ea dolore culpa. Provident, exercitationem reiciendis voluptatum nulla quo nihil iste? Non doloremque officia ex dicta, ea molestias corporis. Quisquam, tenetur! Consequatur totam quaerat ullam incidunt quas nostrum expedita, quidem iste tempora est blanditiis corrupti sunt id! Esse necessitatibus non harum, ad quisquam unde, eius placeat est explicabo ex repudiandae suscipit, ipsum tempora a quibusdam </p>
						</div>
					</div>

				</div>
    </body>
</html>