并排对齐两个部分的底部

Question

今天，我并排实现了两个部分（尽管我使用了商品标签），但是因为在左侧部分有文本，而在另一部分只有图像，所以两个部分的底部都没有对齐

问题是我知道如何将这些部分并排放置，但是我无法使两个部分的底部都在同一行中匹配。

我知道这与文本有关，在已建立的填充上添加了自己的间距。

如果有人可以给我一些有关这种情况的见解，将不胜感激，我真的找不到解决方案……

以下是代码：

HTML

<section id="intro">
  <article class="intro_info">
    <h1>Lorem Ipsum</h1>
    <p>At vero <br> eos et accusamus et iusto odio       dignissimos ducimus 
    qui blanditiis praesentium       voluptatum deleniti atque corrupti quos             
    dolores<p>
  </article>
  <article class="intro_img">
  </article>
</section>

CSS

article.intro_info {
padding: 30px 0 17% 0;
background: -webkit-linear-gradient(left, #4a9339 0%,#7fbc55 100%);
width: 50%;
float: left;
padding-left: 10px;
}

article.intro_img {
padding: 30px 0 17% 0;
background-image: url(‘https://res.cloudinary.com/dbssny2ox/image/upload/v1532076139/hardlevel_des
cr_zxs50o.jpg’);
background-repeat: no-repeat;
background-position: center;
background-size: cover;
width: 50%;
float: left;
}

article.intro_info h1{
font-family: “Lato”;
font-size: 36px;
color: #fff;
letter-spacing: 2px;
content: ”;
width: 35px;
padding-bottom: 10px;
border-bottom: 3px solid #fff;
margin-bottom: 20px;
left: 0px;
}

article.intro_info p{
font-family: “Lato”;
font-size: 20px;
color: #fff;
}