How to vertically align text and 4 images?

I am trying to build a page that has a paragraph of text with 4 images in a quad that are directly to the right of it. The problem is I've previously tried using floats, but as expected, this did not work and so far I have this... http://ift.tt/1zlq1YS

The code:

#panel1 {
        padding: 5%;
        width: 100%;
        background-color: #16818a;
}

#intro-text {
        background-color: #16818a;
        width: 50%;
}

div#quad {
    background-color: #111; font-size: 0;
    width: 50%; margin: 0 auto;
}

div#quad figure {
    margin: 0; width: 50%; height: auto;
    transition: 1s; display: inline-block;
    position: relative;
}

div#quad figure img { 
    width: 100%; 
    height: auto; 
}

div#quad figure:nth-child(1) { 
    transform-origin: top left; 
}

div#quad figure:nth-child(2) { 
    transform-origin: top right; 
}

div#quad figure:nth-child(3) {
         transform-origin: bottom left; 
}
         
div#quad figure:nth-child(4) { 
    transform-origin: bottom right;
}

.expanded { 
    transform: scale(2); 
    z-index: 5; 
}

div.full figure:not(.expanded) { 
    pointer-events: none; 
}

div#quad figure:hover { 
    cursor: pointer; 
    z-index: 4; 
}

<section id="panel1">
<div id='intro-text'>
<h3>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut ac dui enim.</h3>
</div>

<div id="quad">
<figure>
<img src="http://ift.tt/1wukO6z" alt="courses" width="1000" height="700" class="alignnone size-full wp-image-31" />
</figure>
<figure>
<img src="http://ift.tt/1zlq0ny" alt="rental" width="1000" height="700" class="alignnone size-full wp-image-32" />
</figure>
<figure>
<img src="http://ift.tt/1wukQeA" alt="tour" width="1000" height="700" class="alignnone size-full wp-image-33" />
</figure>
<figure>
<img src="http://ift.tt/1zlq0nC" alt="where" width="2592" height="1944" class="alignnone size-full wp-image-34" />
</figure>
</div>
</section>

Any help would be appreciated, cheers!