Align these 2 hrefs at the same height next to each other? - html

Question

I can't get these 2 app badges (a hrefs) to align as display: inline-block at the same height next to each other horizontally.
I've tried just manually manipulating the margin-top on the second a href, but resizing window breaks it. I need this to be responsive. Here is html:
<div class="introwrap small-12 medium-10 large-8 small-centered columns">
<img src="https://tools.applemediaservices.com/api/badges/download-on-the-app-store/black/en-us?size=250x83&releaseDate=1617148800&h=118342e0e75ef2d882289fc4ee258bfb" alt="Download on the App Store" style="border-radius: 13px; width: 250px; height: 83px;">
<a href=''><img alt='Get it on Google Play' src='https://play.google.com/intl/en_us/badges/static/images/badges/en_badge_web_generic.png' style="margin-left: 0%; margin-top: -16.5%;display:inline-block;height:125px;overflow:hidden;" /></a>
</div>
Css is inline except for the container which is generated by wordpress. I know I need to wrap these a hrefs in a smaller container div. How can I align these a hrefs at same height inline?

Answer 1

One of the issues is that the images are not the same size. Google play image has transparent border around of it.
.badges
{
width: 100%;
text-align: center;
margin-bottom: 4%;
}
.badge1,
.badge2
{
display: inline-block;
overflow: hidden;
border-radius: 13px;
width: 250px;
height: 83px;
}
.badge2
{
margin-left: 0;
width: 300px;
}
.badge1 > img
{
border-radius: 13px;
height: 83px;
}
.badge2 > img
{
border-radius: 13px;
height: 123px;
position: relative;
top: -20px;
left: -10px;
}
<div class="introwrap small-12 medium-10 large-8 small-centered columns badges">
<img src="https://tools.applemediaservices.com/api/badges/download-on-the-app-store/black/en-us?size=250x83&releaseDate=1617148800&h=118342e0e75ef2d882289fc4ee258bfb" alt="Download on the App Store">
<img alt='Get it on Google Play' src='https://play.google.com/intl/en_us/badges/static/images/badges/en_badge_web_generic.png' />
</div>