SCSS

HTML

<ul>
  <li class="li-item">
    <div class="li-item-inner">
      <div class="heading">
        <div class="title">Some title text</div>
        <div class="subtitle">Title subtitle goes here</div>
      </div>
      <a href="#" class="photo"><div class="img">Picture here...</div></a>
      <div class="some-extra-block">
        Some extra info for some li-item
      </div>
      <div class="details">
        <div class="price">
          <div class="item-price">15$</div>
        </div>
        <div class="small-images">
          <div class="small-image">Some image here</div>
          <div class="small-image">Some image here</div>
        </div>
        <div class="see-item">
            <a href="#">click here to see item</a>
        </div>
      </div>
    </div>
  </li>
  <li class="li-item">
    <div class="li-item-inner">
      <div class="heading">
        <div class="title">Some title text goes here</div>
        <div class="subtitle">Title subtitle goes here in 2 rows</div>
      </div>
      <a href="#" class="photo"><div class="img">Picture here...</div></a>
      <div class="details">
        <div class="price">
          <div class="item-price">15$</div>
        </div>
        <div class="small-images">
          <div class="small-image">Some image here</div>
          <div class="small-image">Some image here</div>
        </div>
        <div class="see-item">
            <a href="#">click here to see item</a>
        </div>
      </div>
    </div>
  </li>
  <li class="li-item">
    <div class="li-item-inner">
      <div class="heading">
        <div class="title">Some title text goes here</div>
        <div class="subtitle">if subtitle more than 2 rows then gets cut off all the rest and doesn't show it like this </div>
      </div>
      <a href="#" class="photo"><div class="img">Picture here...</div></a>
      <div class="details">
        <div class="price">
          <div class="item-price">15$</div>
        </div>
        <div...

SCSS

ul {
  list-style-type: none;
  display: flex;
  flex-wrap: wrap;
}

.li-item {
  margin-right: 10px;
  margin-bottom: 10px;
  padding: 10px;
  border: 1px solid black;
  width: 20%;
}

.li-item-inner {
  border: 1px solid red;
  padding: 7px;
}

.heading {
  border: 1px solid green;
}

.subtitle {
  overflow: hidden;
  max-height: 32px;
}

.photo {
  border: 1px solid blue;
  display: block;
  width: 100%;
  height: 70px;
}

.some-extra-block {
 border: 1px solid orange;
}

.details {
  border: 1px solid purple;
}