The curios case of unequal media cards

#help #html #css

Recently, I was working on a little project and I ran into an issue that took me hours to figure out. The issue is the image used as the cover image for this article where the media cards have unequal heights due to varying content.

At first, I taught it was a code in the CSS that was causing the issue, the first debugging approach I took was to comment all CSS code except the ones responsible for styling the media cards but still the issue persisted, there was no JavaScript on the Web page, therefore, I turned to the HTML.

I began with the same approach of commenting out some HTML code and then out of nowhere, the heights of the media cards became equal, the CSS was not the issue it was the HTML.

The question is: Why is a piece of HTML causing the media cards to have varying heights?

I looked around and still could not find an answer, then I decided to ask the DEV community.

Here is the HTML and CSS code to reproduce the issue.

The HTML

<main>
    <div class="row">
        <section>
            <div class="media-card">
                <img
                    class="media-card__image"
                    src="path-to-image"
                    alt="An image of a fictional site named Bukateria"
                    width="300"
                    height="200"
                />
                <div class="media-card__content">
                    <h2 class="media-card__title">Bukateria</h2>
                    <p class="media-card__body">
                        The site is fiction. You can <a href="#">check it online</a>
                        and view the <a href="#">code on GitHub</a>.
                    </p>
                </div>
            </div>
        </section>

        <section>
            <div class="media-card">
                <img
                    class="media-card__image"
                    src="path-to-image"
                    alt="An image of a fictional design studio named Alice and bob"
                    width="300"
                    height="200"
                />
                <div class="media-card__content">
                    <h2 class="media-card__title">Alice & Bob</h2>
                    <p class="media-card__body">
                        A fictional Web design studio created as the
                        <a href="#"> final project</a> for a
                        <a href="#">series of articles on Web development</a>.
                    </p>

                    <p class="media-card__body">
                        <a href="#">
                            Check it online</a> and view the
                        <a href="#" >code on GitHub</a>.
                    </p>
                </div>
            </div>
        </section>
    </div>
</main>

The CSS

/**
 * Download the Catamaran font on Google fonts or swap it
 * with your desired font.
 */

body {
    background-color: #bbb;
}

main {
    width: 70%;
    margin: 0 auto;
}

.media-card {
    background-color: #fff;
    border: 1px solid hsl(0, 0%, 85%);
    border-radius: 4px;
    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
    overflow: hidden;
    max-width: 18.75em;
    margin: 2em auto;
}

@media screen and (min-width: 48em) {
    .row {
        display: flex;
        justify-content: space-around;
    }
}

.media-card__image {
    display: block;
    width: 100%;
    object-fit: cover;
}

.media-card__content {
    padding: 1rem;
}

.media-card__title {
    font-size: 1.25rem;
    color: rgba(0,0,0,0.8);
    font-family: "Catamaran-Bold";
}

.media-card__body {
    font-size: 1rem;
    color: rgba(0,0,0,0.75);
    line-height: 1.5;
    font-family: "Catamaran-Medium";
}

I intentionally did not mention the piece of HTML that I commented out for the following reasons:

You might comment (or delete) another HTML code other than the one I commented out and still solve the issue.
You can tell me why the commented or deleted HTML is causing the issue.
You might be able to solve it with CSS.

Thanks in advance.