<div class="flex">
<div class="image"><img src="data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20width%3D'480'%20height%3D'240'%3E%3Crect%20width%3D'100%25'%20height%3D'100%25'%20fill%3D'crimson'%2F%3E%3Cline%20x1%3D'0'%20x2%3D'480'%20y1%3D'0'%20y2%3D'240'%20stroke%3D'gainsboro'%2F%3E%20%3Cline%20x1%3D'480'%20x2%3D'0'%20y1%3D'0'%20y2%3D'240'%20stroke%3D'gainsboro'%2F%3E%3Ctext%20x%3D'240'%20y%3D'125'%20font-size%3D'20'%20font%3D'Verdana%2C%20sans-serif'%20fill%3D'white'%20text-anchor%3D'middle'%3E480%20x%20240%3C%2Ftext%3E%3C%2Fsvg%3E" alt=""></div>
<div class="item">Lorem ipsum dolor sit amet consectetur adipisicing elit. Animi quasi illo qui corrupti autem accusantium numquam unde nobis, iusto consectetur ratione tempore cum libero natus a, veniam ex magni impedit?</div>
</div>
.flex {
display: flex;
flex-wrap: wrap;
> * {
box-sizing: border-box;
font-family: arial, sans-serif;
background: #222;
color: #eee;
}
img {
width: 100%;
display: block;
}
}
.image,
.item {
flex: 1 1 320px;
}
.item {
padding: 1.5rem;
}
View Compiled
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.