title: Stretch one element in height, but not the other
body: <p>I have a row with flex-elements with <code>align-items: stretch</code>. They are the same height, which is what I need.</p>
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-css lang-css prettyprint-override"><code>        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;
          }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;!DOCTYPE html&gt;
  &lt;html lang="en"&gt;
  &lt;head&gt;
      &lt;meta charset="UTF-8"&gt;
      &lt;meta name="viewport" content="width=device-width, initial-scale=1.0"&gt;
      &lt;title&gt;Document&lt;/title&gt;
  &lt;/head&gt;
  &lt;body&gt;
      &lt;div class="container"&gt;
          &lt;div class="items"&gt;
              &lt;div class="item"&gt;
                  &lt;div class="content"&gt;
                      &lt;div class="title"&gt;long-long&lt;br&gt;title&lt;/div&gt;
                      &lt;div class="title"&gt;desc&lt;/div&gt;
                      &lt;div class="price"&gt;price&lt;/div&gt;
                  &lt;/div&gt;
                  &lt;div class="btn"&gt;btn&lt;/div&gt;
              &lt;/div&gt;
              &lt;div class="item"&gt;
                  &lt;div class="content"&gt;
                      &lt;div class="title"&gt;title&lt;/div&gt;
                      &lt;div class="title"&gt;desc&lt;/div&gt;
                      &lt;div class="price"&gt;price&lt;/div&gt;
                  &lt;/div&gt;
                  &lt;div class="btn"&gt;btn&lt;/div&gt;
              &lt;/div&gt;
              &lt;div class="item"&gt;
                  &lt;div class="content"&gt;
                      &lt;div class="title"&gt;title&lt;/div&gt;
                      &lt;div class="title"&gt;desc&lt;/div&gt;
                      &lt;div class="price"&gt;price&lt;/div&gt;
                  &lt;/div&gt;
                  &lt;div class="btn"&gt;btn&lt;/div&gt;
              &lt;/div&gt;
          &lt;/div&gt;
      &lt;/div&gt;
  &lt;/body&gt;
  &lt;/html&gt;</code></pre>
  </div>
  </div>
  </p>
  <p>The question is:</p>
  <p>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</p>
  <p><strong>EDIT</strong></p>
  <p>It looks like it's easier to show the result I want to achieve visually</p>
  <p>What I get:</p>
  <p><a href="https://i.stack.imgur.com/EPkev.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/EPkev.png" alt="enter image description here" /></a></p>
  <p>What I want:</p>
  <p><a href="https://i.stack.imgur.com/CZm0d.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/CZm0d.png" alt="enter image description here" /></a></p>