css - Image alignment issue with HTML5 -

i have 3 images. 2 float on left, dimensions of 490x260 , 1 taller image float on right, 490x545. want have 3 images floating side side, 2 left ones on top of each other same height taller 1 right. please help. thank you

<div class="media-section">             <div class="section">                 <div class="container">                     <div class="row">                         <div class="col6">                             <div class="media-section__thumbnail thumbnail">                                 <a href=""><img src="imgs/florida_door.jpg">                                 <p><i class="fa fa-chevron-right"></i></p></a>                             </div>                         </div>                         <div class="col6">                             <div class="media-section__thumbnail thumbnail">                                 <a href="#"><img src="imgs/book_now_door.jpg">                                 <p><i class="fa fa-chevron-right"></i></p></a>                             </div>                         </div>                          <div class="col6">                             <div class="media-section__thumbnail  thumbnail">                                 <a href="sub_pages/las_salinas_spain.html"><img src="imgs/spain_door.jpg">                                 <p><i class="fa fa-chevron-right"></i></p></a>                             </div>                         </div>                     </div><!--row end-->                 </div><!--container end-->             </div><!--section end-->         </div><!--medi-section end-->    

and css

.section { padding: 4rem 0 ; overflow: hidden; 

}

.media-section { background: #ebebeb;  overflow: hidden; 

}

.container { width: 70%; margin: 0 auto; max-width: 1000px; 

}

.thumbnail img { border: 2px solid #fff; box-shadow: 0 0 1px 0 #184450; width: 100%; height: auto; 

}

.media-section__thumbnail p { position: absolute; bottom: 1%; right: 8%; font-family: 'lato', sans-serif, arial; text-transform: uppercase; font-weight: 600; color: #fff; letter-spacing: .4rem; text-align: center; 

}

• have first 2 images in same col6 div
• have 3rd image in second col6 div
• remove col6 div
• float col6

also, make images stack in first column, should make them display: block , remove width , height - they're not needed.

.col6 {   width: 50%;   float: left; } 

give first column additional class of first

.col6.first img {   display: block }