Aligning button in two columns/boxes at the same level horizontally

Hi,

I have the following two boxes based on a previous thread:
https://jsfiddle.net/toolman/j4cLotrz/5/

What I am trying to do is have the two buttons in each column/box be horizontally aligned at the same level, so the one on the left is in level with the one on the right, keeping the space between the list items and the button on the right.

I’m wondering the best way to do this and then removing the space when on mobile on the left one.

If anyone can suggest a way of doing this, it would be great :slight_smile:

Thank you.

I’m lost, can’t find those buttons, but two already aligned square boxes.

Are you sure you posted the correct fiddle? :thinking:

That’s odd, they should be here:
https://jsfiddle.net/toolman/j4cLotrz/8/

Maybe I didn’t update the fiddle.

I am referring to these buttons:

I’m on a mobile at the moment so can’t see your fiddle but if the link/button is a flex item ( direct child of a flexbox) then you can use margin-top: auto on that flex item to move it to the bottom of the container if all is set up correctly.

I’ll be back later this afternoon and take a proper look :slight_smile:

You are using boostrap class names therefore keep in mind they have responsiveness on different screen sizes.
This is how it looks on tablets, mobile phones:

Your to containers are wrapping due to there not being enough width.

Even in desktop version is highly unclear how you are trying to horizontally align buttons if there are different container elements between:

What you can do is justify the flex content with space between:

.listing-plan {
  ...
  justify-content: space-between;
}

Result

3 Likes

Thanks for the solution.

That worked great :slight_smile: I think the overlapping of the two elements on mobile is because I have set a negative margin on the element containing the “Top Heading” text. I can resolve this by adding some margin on the mobile version.

Thanks again for this :slight_smile:

I see you are already sorted with the good solution from @andris.vilde but I thought I would explain the solution I gave in my post and what the difference is :slight_smile:

If you removed the justify-content and then set margin-top auto on the buttons the buttons would be pushed to the bottom and the content above would reside in the normal flow.

e.g.


.listing-plan {
  padding: 30px;
  border-radius: 3px;
  text-align: center;
  flex: 1 0 100%;
	width: 100%;
	 display: flex;
  flex-direction: column;
  /*justify-content: center;*/
  /*height: 100%;not needed*/
}
.btn-white,
.btn-pink-to-transparent{margin-top:auto;}

When you use an auto margin on a flex-item the side that is auto will soak up all the available space and will push the element as far in one direction as it can (be that horizontal or vertical). In your case this would push the button to the bottom of the flex-container automatically without interfering with the content above.

The justify-content: space-between; solution on the other hand spreads out all the content which means top and bottom are aligned at top and bottom but any elements between top and bottom are spread out evenly. This means you get different gaps between the elements if there is different content in each box (essentially the inner content is spread out over the available space).

Both methods are correct and useful but my preference would be not to spread the middle items but that’s just a personal preference and if you like the spread out effect then all well and good. It does depend on content to some degree but I thought I’d just explain that my solution did work even if you prefer the other solution :slight_smile:

3 Likes