<div class="wrapper">
<img src="https://via.placeholder.com/400x200" class="image" alt="">
<div class="columns">
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Vehicula ipsum a arcu cursus vitae congue mauris rhoncus aenean. Convallis a cras semper auctor neque vitae. Commodo odio aenean sed adipiscing diam donec adipiscing. Tristique senectus et netus et malesuada. Mauris rhoncus aenean vel elit scelerisque mauris. Tincidunt vitae semper quis lectus nulla at. In cursus turpis massa tincidunt dui ut ornare lectus sit. Pretium vulputate sapien nec sagittis aliquam. Viverra tellus in hac habitasse. Enim lobortis scelerisque fermentum dui faucibus in. Ut consequat semper viverra nam libero justo laoreet sit amet. Fermentum leo vel orci porta non pulvinar neque laoreet suspendisse. Arcu non sodales neque sodales ut etiam sit amet nisl. Vivamus arcu felis bibendum ut tristique et. Sodales ut eu sem integer.
</p>
<p>
Egestas sed sed risus pretium quam vulputate dignissim suspendisse. Amet mattis vulputate enim nulla aliquet. Faucibus pulvinar elementum integer enim neque volutpat. Enim nulla aliquet porttitor lacus luctus accumsan tortor. Risus feugiat in ante metus dictum. Cras sed felis eget velit aliquet sagittis id. Pretium fusce id velit ut tortor pretium viverra. Sed ullamcorper morbi tincidunt ornare massa. Id velit ut tortor pretium viverra suspendisse potenti nullam. Malesuada bibendum arcu vitae elementum curabitur. Ultrices neque ornare aenean euismod elementum nisi quis eleifend. Ultrices sagittis orci a scelerisque purus semper eget. Adipiscing elit pellentesque habitant morbi tristique. Ipsum dolor sit amet consectetur adipiscing elit pellentesque. Eget est lorem ipsum dolor sit amet consectetur adipiscing. Non diam phasellus vestibulum lorem. Quisque id diam vel quam. Sapien eget mi proin sed libero enim. Ut sem nulla pharetra diam sit. Morbi quis commodo odio aenean sed adipiscing.
</p>
<p>
Viverra tellus in hac habitasse platea dictumst vestibulum rhoncus. Enim ut tellus elementum sagittis vitae et. Tortor aliquam nulla facilisi cras. Blandit aliquam etiam erat velit scelerisque in. Tristique senectus et netus et malesuada fames ac turpis egestas. Bibendum at varius vel pharetra vel turpis. Leo a diam sollicitudin tempor id eu. Orci eu lobortis elementum nibh tellus molestie. Interdum velit euismod in pellentesque massa placerat duis. Aliquam id diam maecenas ultricies mi.
</p>
</div>
</div>
.wrapper {
position: relative;
max-width: 1200px;
}
.image {
position: absolute;
left: 0;
top: 0;
width: calc((100% - 2rem) / 3);
}
.columns {
column-count: 3;
gap: 2rem;
}
.columns::before {
display: block;
content: '';
width: 30%;
padding-bottom: 60%;
}
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.