Equal item height with fluid header height

by Dominik Wilk

HTML

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Document</title>
</head>
<body>
  <div class="container">
    <div class="item">
      <div class="up">
        <h3>Lorem ipsum sit amet dolor</h3>
      </div>
      
      <div class="down">
        <button>abc</button>
        <button>def</button>
      </div>
    </div>
    
    <div class="item">
      <div class="up">
        <h3>Lorem ipsum sit amet dolor. Lorem ipsum sit amet dolor.</h3>
      </div>
      
      <div class="down">
        <button>abc</button>
        <button>def</button>
      </div>
    </div>
    
    <div class="item">
      <div class="up">
        <h3>Lorem ipsum sit amet dolor Lorem ipsum sit amet dolor.</h3>
      </div>
      
      <div class="down">
        <button>abc</button>
        <button>def</button>
      </div>
    </div>
    
    <div class="item">
      <div class="up">
        <h3>Lorem ipsum sit amet dolor</h3>
      </div>
      
      <div class="down">
        <button>abc</button>
        <button>def</button>
      </div>
    </div>
    
    <div class="item">
      <div class="up">
        <h3>Lorem ipsum sit amet dolor</h3>
      </div>
      
      <div class="down">
        <button>abc</button>
        <button>def</button>
      </div>
    </div>
    
    <div class="item">
      <div class="up">
        <h3>Lorem ipsum sit amet dolor</h3>
      </div>
      
      <div class="down">
        <button>abc</button>
        <button>def</button>
      </div>
    </div>
    
    <div class="item">
      <div class="up">
        <h3>Lorem ipsum sit amet dolor</h3>
      </div>
      
      <div class="down">
        <button>abc</button>
        <button>def</button>
      </div>
    </div>
    
    <div class="item">
      <div class="up">
        <h3>Lorem ipsum sit amet dolor</h3>
      </div>
      
      <div class="down">
        <button>abc</button>
        <button>def</button>
      </div>
    </div>
  </div>
</body>
</html>

SCSS

* {
  box-sizing: border-box;
}

.container {
  max-width: 600px;
  display: flex;
  flex-wrap: wrap;
}

.item {
  display: flex;
  flex-direction: column;
  flex: 1 1 calc(50% - 5px);
  padding: 10px;
  background: lightgray;
  max-width: 50%;
  justify-content: space-between;
  margin: 0 10px 10px 0;
  
  &:nth-of-type(2n) {
    margin-right: 0;
  }
  
  h3 {
    background: salmon;
  }
}