I have a row with flex-elements with align-items: stretch. They are the same height, which is what I need.
html,body{
padding: 0;
margin: 0;
}
.container{
width: 500px;
}
.items{
width: 100%;
display: flex;
}
.item{
width: 40%;
margin: 0 10px;
}
.content{
background: #808080;
width: 100%;
}
.btn{
padding: 5px;
margin-top: 10px;
border: 1px solid black;
}<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<div class="container">
<div class="items">
<div class="item">
<div class="content">
<div class="title">long-long<br>title</div>
<div class="title">desc</div>
<div class="price">price</div>
</div>
<div class="btn">btn</div>
</div>
<div class="item">
<div class="content">
<div class="title">title</div>
<div class="title">desc</div>
<div class="price">price</div>
</div>
<div class="btn">btn</div>
</div>
<div class="item">
<div class="content">
<div class="title">title</div>
<div class="title">desc</div>
<div class="price">price</div>
</div>
<div class="btn">btn</div>
</div>
</div>
</div>
</body>
</html>The question is:
How can I do this, the height of all content blocks was the same and equal to the largest of them, but the height of the buttons and the indent between the button and the content were fixed
EDIT
It looks like it's easier to show the result I want to achieve visually
What I get:
What I want:
