Keep text aligned top and image aligned to the bottom of relative height divs

I have 4 columns of products with a header, description and image below and I want the text areas to at the top and the images to each line up at the bottom so they stay aligned when the screen is resized.

At the moment the images move up and down as the text wraps - which looks very untidy as they each have a different amount of text.

I have tried using tables and position absolute and they each cause problems and don't work properly.

Here is my code:

#product-landing .landing-row {
  position: relative;
  height: inherit;
}

.product-landing,
.product-landing-2,
.product-landing-3 {
  margin-right: 2.0533%;
}

.product-landing,
.product-landing-2,
.product-landing-3,
.product-landing-4 {
  margin-left: 0px;
  display: inline-block;
  position: relative;
  height: 100%;
  vertical-align: top;
  width: 22.978%;
}

.product-landing-4 {
  margin-right: 0px;
}

#product-landing p {
  margin-top: 0px;
  margin-bottom: 5px;
  clear: both;
  width: 100%;
}

.product-landing .land-image {
  vertical-align: bottom;
}

.product-landing img,
.product-landing-2 img,
.product-landing-3 img,
.product-landing-4 img {
  margin-top: 10px;
  display: block;
  max-width: 350px;
  margin: 0 auto;
  bottom: 0px;
  width: 100%;
}

<div id="product-landing">
  <div class="landing-row">
    <div class="product-landing">
      <div id="product-text">
        <div id="offer-title"><a href="/address" target="_blank">Product1</a></div>
        <p>
        </p>
        <p><b><i>Product description</i></b></p>
      </div>
      <p class="land-image">
        <a href="/address" target="_blank"><img src="http://image1.jpg"></a>
      </p>
    </div>
    <div class="product-landing-2">
      <div id="product-text">
        <div id="offer-title"><a href="/address" target="_blank">Product2</a></div>
        <p>
        </p>
        <p><b><i>Product description</i></b></p>
      </div>
      <p class="land-image">
        <a href="/address" target="_blank"><img src="http://image2.jpg"></a>
      </p>
    </div>
    <div class="product-landing-3">
      <div id="product-text">
        <div id="offer-title"><a href="/address" target="_blank">Product3</a></div>
        <p>
        </p>
        <p><b><i>Product description</i></b></p>
      </div>
      <p class="land-image">
        <a href="/address" target="_blank"><img src="http://image3.jpg"></a>
      </p>
    </div>
    <div class="product-landing-4">
      <div id="product-text">
        <div id="offer-title"><a href="/address" target="_blank">Product4</a></div>
        <p>
        </p>
        <p><b><i>Product description</i></b></p>
      </div>
      <p class="land-image">
        <a href="/address" target="_blank"><img src="http://image4.jpg"></a>
      </p>
    </div>
  </div>
</div>

Solution

You can use flexbox for this

#product-landing .landing-row {
  display:flex;
  flex-direction:row;
  justify-content:space-between;
  flex-wrap:wrap;
}

#product-landing p {
  margin-top: 0px;
  margin-bottom: 5px;
}

.product-landing {
  display:flex;
  flex-direction:column;
  width: 22.978%;
}

.product-landing img {
  margin-top: 10px;
  display: block;
  max-width: 350px;
  width: 100%;
}

.product-text {
  flex-grow:1;
}

<div id="product-landing">
  <div class="landing-row">
    <div class="product-landing">
      <div class="product-text">
        <div class="offer-title"><a href="/address" target="_blank">Product1</a></div>
        <p><b><i>Product description</i></b></p>
      </div>
      <p class="land-image">
        <a href="/address" target="_blank"><img src="http://via.placeholder.com/350x150"></a>
      </p>
    </div>
    <div class="product-landing">
      <div class="product-text">
        <div class="offer-title"><a href="/address" target="_blank">Product2</a></div>
        <p><b><i>Product description</i></b></p>
      </div>
      <p class="land-image">
        <a href="/address" target="_blank"><img src="http://via.placeholder.com/350x150"></a>
      </p>
    </div>
    <div class="product-landing">
      <div class="product-text">
        <div class="offer-title"><a href="/address" target="_blank">Product2</a></div>
        <p><b><i>Product description</i></b></p>
      </div>
      <p class="land-image">
        <a href="/address" target="_blank"><img src="http://via.placeholder.com/350x150"></a>
      </p>
    </div>
    <div class="product-landing">
      <div class="product-text">
        <div class="offer-title"><a href="/address" target="_blank">Product3</a></div>
        <p><b><i>Product description Product description Product description</i></b></p>
      </div>
      <p class="land-image">
        <a href="/address" target="_blank"><img src="http://via.placeholder.com/350x150"></a>
      </p>
    </div>
    <div class="product-landing">
      <div class="product-text">
        <div class="offer-title"><a href="/address" target="_blank">Product4</a></div>
        <p><b><i>Product description</i></b></p>
      </div>
      <p class="land-image">
        <a href="/address" target="_blank"><img src="http://via.placeholder.com/350x150"></a>
      </p>
    </div>
  </div>