Capa con position

Creo que se le puede dar una vuelta a cómo construyes esa composición de elementos para que te quede componente más sólido si tiene que soportar varias resoluciones de pantalla. Pero tal cómo lo tienes si les das un buen margen inferior a la section ya lo tienes.

Esto es lo que tengo:

CSS:

section, article{
display:block
}

section{
background-color:#F00;
position:relative;
padding:0;
min-height:700px
}

article{
width:95%;
background-color:#9FC;
margin:auto;
padding:1rem
}

.cab{
background-color:#183698;
position:absolute;
top:10%;
left:0;
height:400px;
width:100%;
z-index:0
}

.texto{
background-color:#fff;
max-width:350px;
padding:3.5rem;
position:absolute;
top:5%;
right:5%;
z-index:1
}

HTML:

<section>
<div class="cab"></div>

<div class="texto">
<h3>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut vitae mauris ultricies, consequat orci id, imperdiet quam. Aenean finibus nisl orci, a suscipit quam rhoncus vitae. Phasellus consectetur commodo nisi cursus rhoncus. Curabitur fermentum ante pretium nunc finibus aliquam sed sit amet nibh.</h3>

<p>Etiam massa sapien, bibendum ac sagittis vitae, fringilla a nibh. Donec tincidunt gravida quam, hendrerit tempor massa eleifend in. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Maecenas pretium condimentum orci aliquam tristique. Integer nec volutpat justo. Maecenas at elit augue.</p>

<p>Quisque condimentum ligula at metus placerat, non commodo purus ullamcorper. Maecenas risus nisl, commodo eu augue et, ultricies condimentum dui. Maecenas id nunc gravida, placerat odio quis, tempor turpis. Integer at risus imperdiet, laoreet turpis a, accumsan lacus. Phasellus diam sem, ultrices sed pulvinar nec, tincidunt quis augue. Maecenas hendrerit lorem eget libero porta semper. In nunc eros, porttitor eu lacus nec, mattis vehicula urna.</p>

</div>

</section>

<article>
<h2>It has survived not only</h2>
<p>Curabitur at arcu porttitor, interdum arcu at, congue est. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut finibus urna sed neque feugiat, iaculis finibus neque tincidunt. Aenean non sem eget velit congue ultrices at in risus. Pellentesque mattis scelerisque facilisis. Sed gravida euismod mauris id pharetra. Ut sit amet lacinia ex. In hac habitasse platea dictumst. Duis quis consequat tortor.</p>

<p>Praesent sed imperdiet massa, vitae pellentesque nisl. Nullam ac euismod felis. Mauris at ipsum et ipsum hendrerit elementum. Nullam semper consectetur suscipit. Donec at lorem at nunc dignissim blandit sed vitae dui. Morbi ut sem accumsan, ornare lorem a, feugiat odio. Pellentesque accumsan, erat facilisis tincidunt vestibulum, turpis arcu fermentum tortor, ac sollicitudin neque lorem non nunc. Fusce eu justo odio. Nullam et ante hendrerit, blandit mi at, malesuada tortor. Suspendisse porttitor viverra nisl, eu aliquet est scelerisque nec. Praesent blandit lectus ac mattis fringilla. Sed vitae lacinia dui, vel tristique nisi. Donec gravida tincidunt quam nec dignissim.</p>
</article>

El alto que le doy al section de 700px hace que se mantenga el div Texto contenido, pero no logro mantener los elementos sin prescindir del alto.... Que tendría que tener el section para que article se posicione debajo, independientemente del contenido del div Texto.....

Muchas gracias de antemano