Remove bottom margin from last child element dynamically

Using flexbox in CSS, I've dynamically aligned the right column content with the image on the left hand side. Probably like your CSS, my headings and paragraphs have bottom margins by default. So if my text's last paragraph has a bottom margin, the whole right column will look slightly misaligned to the left column's image because the bottom paragraph's margin is pushing down.

Instead of trying to create custom CSS classes for every situation, or relying on my content editors to edit the HTML source, I made this super simple CSS class which I apply to all nearly all of my templates.

.mb-lc-0 > :last-child {
    margin-bottom: 0 !important;
}

I followed the Bootstrap naming convention for margin-bottom. So my class is basically shorthand for "margin-bottom-last-child-0". This bit of CSS, when applied to a parent element, finds the last child of the immediate children and makes the bottom margin 0 pixels.

To use this code, simply copy it to your CSS file. Then add the class .mb-lc-0 to any parent element where you want the last element to not have a bottom margin. You might use it in the following way:

<section class="hero">
  <div class="mb-lc-0">
    <h1>About Us</h1>
    <p>Sit amet porttitor eget dolor morbi non arcu risus. Sem integer vitae justo eget. Mauris sit amet massa vitae tortor condimentum. Blandit turpis cursus in hac. Volutpat odio facilisis mauris sit amet massa vitae tortor. Amet nisl purus in mollis nunc sed id. Sit amet volutpat consequat mauris nunc congue nisi. Aenean pharetra magna ac placerat. Netus et malesuada fames ac turpis egestas sed. Euismod lacinia at quis risus sed vulputate.</p>
    <p>Arcu dictum varius duis at consectetur lorem donec massa sapien. Egestas erat imperdiet sed euismod. Augue ut lectus arcu bibendum at varius vel. Sem et tortor consequat id porta nibh venenatis cras sed. Neque volutpat ac tincidunt vitae semper quis lectus. Aenean et tortor at risus viverra adipiscing at.</p>
    <p><a href="#link">Learn More</a></p>
  </div>
</section>

In this example, the last paragraph with the Learn More button would be targeted and it would make the bottom margin 0. You'll be surprised at how often you might use this because it can apply to almost countless designs on UI elements like heroes, call to actions, staff bios, navigation, blog posts - virtually everything.