Hidden the overflow part in 2 column - html

Question

I have 3 images and I want to arrange them in 2 columns, one column for 1 image and the other for 2 images. The problem is 2 columns have different heights. And I want to hide the overflow part of the taller column. The picture below shows that.
Here is my HTML:
.row:before,
.row:after {
content: "";
display: table;
}
.row:after {
clear: both;
}
.col {
display: block;
float: left;
margin: 1% 0 1% 1.6%;
}
.section-features img {
width: 100%;
}
.section-features .span-1-of-3 {
width: 33.3%;
padding-left: 5px;
padding-top: 5px;
padding-right: 5px;
}
.section-features .span-2-of-3 {
width: 66.6%;
padding-top: 5px;
padding-left: 5px;
}
<section class="section-features">
<div class="row">
<div class="col span-2-of-3">
<img src="resources/img/modern-brownstone.jpeg" alt="Mordern Brownstone Picture">
</div>
<div class="col span-1-of-3">
<div class="row">
<img src="resources/img/intimate-setting.jpg" alt="An Intimate Setting">
</div>
<div class="row">
<img src="resources/img/edgy-classic.jpg" alt="Edge Classic">
</div>
</div>
</div>
</section>

Answer 1

So what you can do is that give a max-height to your section and set overflow:hidden that will do. Below is a demo for the same.
section {
max-height: 400px;
overflow: hidden;
}
.img1 {
height: 500px;
background-color: red;
display: inline-block;
width: 200px;
float: left;
}
.container {
width: 200px;
}
.img2 {
height: 200px;
background-color: blue;
display: inline-block;
width: 200px;
float: left;
}
div {
margin:5px;
}
.img3 {
height: 200px;
background-color: grey;
display: inline-block;
width: 200px;
float: left;
}
<section>
<div class="img1">
</div>
<div class="conatiner">
<div class="img2">
</div>
<div class="img3">
</div>
</div>
</section>
Hope this helps :)

Answer 2

Change the portion of the images in the .span-2-of-3 and .span-1-of-3 classes. Do not divide the images from 100% because you have added some padding, therefore reduce the padding from the total width. Just to be sure, add overflow: hidden; in the .section-features img.
.row:before,
.row:after {
content: "";
display: table;
}
.row:after {
clear: both;
}
.col {
display: block;
float: left;
margin: 1% 0 1% 1.6%;
}
.section-features img {
width: 100%;
overflow: hidden;
}
.section-features .span-1-of-3 {
width: 30%;
padding-left: 5px;
padding-top: 5px;
padding-right: 5px;
float: right;
}
.section-features .span-2-of-3 {
width: 60%;
padding-top: 5px;
padding-left: 5px;
height: 100%;
}
<section class="section-features">
<div class="row">
<div class="col span-2-of-3">
<img src="https://png.pngtree.com/element_origin_min_pic/16/07/22/2057921811589a1.jpg" alt="Mordern Brownstone Picture">
</div>
<div class="col span-1-of-3">
<div class="row">
<img src="https://png.pngtree.com/element_origin_min_pic/16/07/22/2057921811589a1.jpg" alt="An Intimate Setting">
</div>
<div class="row">
<img src="https://png.pngtree.com/element_origin_min_pic/16/07/22/2057921811589a1.jpg" alt="Edge Classic">
</div>
</div>
</div>
</section>

Answer 3

.section-features .row {
display: table;
width: 100%;
}
.col {
display: table-cell;
}
.col.span-2-of-3 {
width: 70%;
background-color: #f00;
}
.col.span-1-of-3 {
width: 30%;
}
.col.span-1-of-3 .row {
margin-bottom: 20px;
background-color: yellow;
height: 100px;
}
.col.span-1-of-3 .row:last-child {
margin-bottom: 0px;
}
<section class="section-features">
<div class="row">
<div class="col span-2-of-3">
</div>
<div class="col span-1-of-3">
<div class="row">
</div>
<div class="row">
</div>
</div>
</div>
</section>