<div class="container">
<div class="item">
<div class="item-image">
<a href="#"><img src="https://satyr.dev/300x300/58563a" alt="Satyr.io dummy image" width="300" height="300" /></a>
</div>
<div class="item-text">
<h2 class="item-heading">
<a href="#">Nezůstane by péče položená, trasách malém ověšeny podlouhlým</a>
</h2>
<p class="item-perex">
David franků pozadí ty narozen žádná. Vědy roce dané včetně reakcím i za co divný tvarů dar jejíž nepravdivá? Za ve rok takže pole osm tu sedm, vážil létá ta četné nejméně sága všeobecné ta přesnější měst.
</p>
</div>
</div>
</div>
xxxxxxxxxx
.container {
container-type: inline-size;
}
@container (min-width: 300px) {
.item {
display: flex;
}
.item-image {
flex: 1;
}
.item-text {
flex: 2;
}
}
/* ETC. - styling only */
body {
background: #e5e3de;
color: #2E2C08;
}
a {
color: #2E2C08;
}
.container {
padding: 1em;
margin: 2em;
max-width: 50em;
background: white;
}
.item-text,
.item-image {
padding: 1em;
}
img {
height: auto;
max-width: 100%;
}
p, h2 {
margin: 0;
padding: 0;
}
h2 {
font-size: 1.5em;
margin-bottom: 0.5em;
}
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.