<div class="wrap">
<div class="row">
<div class="w60 textbox-1">
<div class="inner">
<p> Lorem ipsum dolor sit amet, consectetur adipisicing elit. Doloribus aliquid eius quia expedita illo sequi optio labore assumenda. Quisquam illo voluptatibus repellendus mollitia quos maxime quas laborum. Perspiciatis hic, accusamus.Aenean ut risus
sodales elit sodales sodales eu sit amet quam. Curabitur feugiat nibh eu imperdiet porttitor. Interdum et malesuada fames ac ante ipsum primis in faucibus. Cras auctor, tortor sed ornare vestibulum, erat erat semper ligula, at aliquam justo
purus at massa. Vestibulum magna justo, dapibus blandit faucibus at, pharetra quis nulla. </p>
</div>
</div>
<div class="w30 object-fit"><a href="#"><img src="http://www.pmob.co.uk/temp2/images/villa.jpg" alt="pic1" width="640" height="478"> </a></div>
</div>
<div class="row">
<div class="w30 object-fit"><a href="#"><img src="http://www.pmob.co.uk/temp2/images/cview.jpg" alt="pic2" width="597" height="317"> </a></div>
<div class="w60 textbox-1">
<div class="inner">
<p> Lorem ipsum dolor sit amet, consectetur adipisicing elit. Doloribus aliquid eius quia expedita illo sequi optio labore assumenda. </p>
</div>
</div>
</div>
<div class="row">
<div class="w60 textbox-1">
<div class="inner">
<p> Lorem ipsum dolor sit amet, consectetur adipisicing elit. Doloribus aliquid eius quia expedita illo sequi optio labore assumenda. Quisquam illo voluptatibus repellendus mollitia quos maxime quas laborum. Perspiciatis hic, accusamus.Aenean ut risus.
</p>
</div>
</div>
<div class="w30 object-fit"><a href="#"><img src="http://www.pmob.co.uk/temp2/images/cview2.jpg" alt="pic3" width="440" height="524"> </a></div>
</div>
<div class="row">
<div class="w30 object-fit"><a href="#"><img src="http://www.pmob.co.uk/temp2/images/cview.jpg" alt="pic2" width="597" height="317"> </a></div>
<div class="w60 textbox-1">
<div class="inner">
<p> Lorem ipsum dolor sit amet, consectetur adipisicing elit. Doloribus aliquid eius quia expedita illo sequi optio labore assumenda. </p>
<p> Lorem ipsum dolor sit amet, consectetur adipisicing elit. Doloribus aliquid eius quia expedita illo sequi optio labore assumenda. </p>
<p> Lorem ipsum dolor sit amet, consectetur adipisicing elit. Doloribus aliquid eius quia expedita illo sequi optio labore assumenda. </p>
</div>
</div>
</div>
</div>
<div class="row">
<div class="w60 textbox-1">
<div class="inner">
<p> Lorem ipsum dolor sit amet, consectetur adipisicing elit. Doloribus aliquid eius quia expedita illo sequi optio labore assumenda. Quisquam illo voluptatibus repellendus mollitia quos maxime quas laborum. Perspiciatis hic, accusamus.Aenean ut risus.</p>
<p> Lorem ipsum dolor sit amet, consectetur adipisicing elit. Doloribus aliquid eius quia expedita illo sequi optio labore assumenda. Quisquam illo voluptatibus repellendus mollitia quos maxime quas laborum. Perspiciatis hic, accusamus.Aenean ut risus.</p>
<p> Lorem ipsum dolor sit amet, consectetur adipisicing elit. Doloribus aliquid eius quia expedita illo sequi optio labore assumenda. Quisquam illo voluptatibus repellendus mollitia quos maxime quas laborum. Perspiciatis hic, accusamus.Aenean ut risus.</p>
</div>
</div>
<div class="w30 object-fit"><a href="#"><img src="http://www.pmob.co.uk/temp2/images/cview2.jpg" alt="pic3" width="440" height="524"> </a></div>
</div>
html {
box-sizing: border-box;
}
*, *:before, *:after {
box-sizing: inherit;
}
body {
margin: 0;
background-color: #FFEEDD;
}
.wrap{margin: 0 10px;}
.textbox-1 {
font-size: 1.25em;
text-align: justify;
min-height:100px;
display:flex;
}
.inner{margin:auto;}
.row {
display: flex;
justify-content:space-around;
padding:25px 0 ;
max-width:1280px;
margin:10px auto;
}
.w60 {
flex: 1 0 60%;
background:#f9f9f9;
padding:10px 20px;
}
.w30{background:#fff;flex:0 0 30%;}
.object-fit{
overflow:hidden;
position:relative;
}
.object-fit img{
position: absolute;
top:50%;
left:50%;
height:auto;
width:auto;
max-width:100%;
margin:auto;
transform:translate(-50%, -50%);
}
@supports (object-fit: cover) {
.object-fit img {
position: absolute;
left:0;
top:0;
height: 100%;
width: 100%;
transform: none;
object-fit: cover;
}
}
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.