Flex

HTML

<div class="container">

    <figure>
        <img src="http://placehold.it/600x370" alt="">
        <figcaption>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</figcaption>
    </figure>
    
    <figure>
        <img src="http://placehold.it/300x180" alt="">
        <figcaption>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</figcaption>
    </figure>
    
    <figure>
        <img src="http://placehold.it/300x180" alt="">
        <figcaption>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</figcaption>
    </figure>

</div>

CSS

.container {
    width:1100px;
    height:400px;
     -webkit-columns: 2;
}

figure {
    position:relative;
    width:300px;
    height:180px;
}

figure:first-child {
    width:600px;
    height:370px;
}

figure:first-child figcaption {
    width:590px;
}

figure figcaption {
    position:absolute;
    z-index:10;
    bottom:0;
    left:0;
    padding:5px;
    width:290px;
    background-color:rgba(0,0,0,.3);
}