<div class="block">
<div class="item1"></div>
<div class="item2">Title Lorem ipsum dolor sit amet consectetur adipisicing elit. Atque facere veniam harum soluta temporibus. Maxime placeat quae neque laboriosam eius, beatae repellendus totam omnis nemo! Obcaecati, facere eum? Molestias, aperiam. Lorem ipsum dolor sit amet consectetur adipisicing elit. Atque facere veniam harum soluta temporibus. Maxime placeat quae neque laboriosam eius, beatae repellendus totam omnis nemo! Obcaecati, facere eum? Molestias, aperiam.</div>
<div class="item3">Lorem ipsum dolor sit amet consectetur adipisicing elit. Atque facere veniam harum soluta temporibus. Maxime placeat quae neque laboriosam eius, beatae repellendus totam omnis nemo! Obcaecati, facere eum? Molestias, aperiam. Lorem ipsum dolor sit amet consectetur adipisicing elit. Atque facere veniam harum soluta temporibus. Maxime placeat quae neque laboriosam eius, beatae repellendus totam omnis nemo! Obcaecati, facere eum? Molestias, aperiam.</div>
</div>
.block{
display: flex;
flex-direction: row;
flex-wrap: wrap;
}
.item1{
width: 200px;
height: 250px;
background: red;
}
.item2{
outline: 1px solid blue;
width: calc(100% - 200px);
}
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.