<div class="cards">
<div class="card">
<img src="https://placehold.co/300x200" alt="">
<div class="title">Title Title Title Title Title Title Title Title</div>
<div class="price">$20</div>
<div>nihil consectetur velit asperiores reprehenderit corporis praesentium eum fugit magnam!</div>
</div>
<div class="card">
<img src="https://placehold.co/300x200" alt="">
<div class="title">Title Title Title <span class="in-stock">В наличии: 100шт.</span></div>
<div class="price">$20</div>
<div>nihil consectetur velit asperiores reprehenderit corporis praesentium eum fugit magnam!</div>
</div>
<div class="card">
<img src="https://placehold.co/300x200" alt="">
<div class="title">Title Title Title Title Title Title Title Title Title Title Title Title Title Title Title Title</div>
<div class="price">$20</div>
<div>nihil consectetur velit asperiores reprehenderit corporis praesentium eum fugit magnam!</div>
</div>
<div class="card">
<img src="https://placehold.co/300x200" alt="">
<div class="title">Title Title Title Title Title Title Title Title Title Title Title Title Title Title Title Title <span class="in-stock">В наличии: 100шт.</span></div>
<div class="price">$20</div>
<div>nihil consectetur velit asperiores reprehenderit corporis praesentium eum fugit magnam!</div>
</div>
<div class="card">
<img src="https://placehold.co/300x200" alt="">
<div class="title">Title Title Title Title Title Title Title Title Title Title Title Title Title Title Title Title</div>
<div class="price">$20</div>
<div>nihil consectetur velit asperiores reprehenderit corporis praesentium eum fugit magnam!</div>
</div>
<div class="card">
<img src="https://placehold.co/300x200" alt="">
<div class="title">Title Title Title Title Title Title Title Title Title Title Title Title Title Title Title Title Title Title Title Title Title Title Title Title Title Title Title Title Title Title Title Title</div>
<div class="price">$20</div>
<div>nihil consectetur velit asperiores reprehenderit corporis praesentium eum fugit magnam!</div>
</div>
<div class="card">
<img src="https://placehold.co/300x200" alt="">
<div class="title">Title Title Title Title Title Title Title Title</div>
<div class="price">$20</div>
<div>nihil consectetur velit asperiores reprehenderit corporis praesentium eum fugit magnam!</div>
</div>
</div>
* {
box-sizing: border-box;
}
body {
max-width: 960px;
margin: 0 auto;
padding:10px 10px;
}
.cards {
display: flex;
justify-content: flex-start;
gap: 0.5em;
align-items: stretch;
flex-wrap: wrap;
.card {
max-width: 200px;
margin-top: 10px;
text-align: top;
display: flex;
flex-direction: column;
justify-content: flex-end;
}
img {
width: 100%;
margin-bottom:0;
}
.title {
padding: 10px 0;
margin-bottom:auto;
}
.in-stock {
display: block;
color: #888;
font-size: 0.9rem;
}
.price {
border-top: 1px dashed #333;
border-bottom: 1px dotted #333;
}
}
@media only screen and (max-width: 700px) {
.cards {
.card {
width: 49%;
}
}
}
View Compiled
This Pen doesn't use any external CSS resources.