Aligning buttons vertically - html

Question

I am working on an add to cart button to something I am making.
Currently, I hardcoded a fixed margin space of:
margin: 10px 20px;
From the text Lab and + ADD ME!
As you can see, it works, but when I have classes of differing number of letters, the alignment is all messed up.
So I looked into having a Linux-style/C-style tab separator string that could allow me to denote a fixed separator length so all my elements would align vertically, using left-padding: 5em.
However, that did not work.
Could someone tell me how I could align all my add to cart buttons?
A sample of the HTML:
<div
class="margin-class-type"
>
<h4>
<div class="title-container">{{ $type }}
<a
href="javascript:void(0)"
class="btn btn-material-yellow-600 btn-xs btn-raised cart-button mdi-content-add-circle-outline">
Add Me!
</a>
</div>
</h4>
<table
class="table table-striped"
>
<th>Class</th>
<th>Section</th>
<th>CRN</th>
<th>Day</th>
<th>Time</th>
<th>Professor</th>
<th>Enroll</th>
<th>Max Enroll</th>
<th>Credits</th>

Answer 1

Depending on how your code is structured, there are several ways to accomplish this.
1) If your titles are not dynamic (you know that they will always be "Lab" and "Lecture") you could set a width on the title element's container that is equal to the width of your widest title with a little extra. Then, you place your "add to cart" button inside the container holding the title and position it absolute so it will line-up vertically always.
Example:
<div class="title-container"><h2>Lab</h2>Add Me</div>
<!-- YOUR TABLE -->
<div class="title-container"><h2>Lecture</h2>Add Me</div>
<!-- YOUR TABLE -->
<style>
div.title-container{width:300px;position:relative;}
a.cart-button{display:block;position:absolute;top:0;right:0;}
</style>
2) If the titles will be dynamic, you can use a bit of Javascript to loop through each and take the widest element, setting that as fixed-width for all others. This is a bit more involved and based on your question I am guessing it would be overkill.
Good luck!

Answer 2

You can add a div for lab and add me and for "button" float : right
or
you might create a div
and inside that 2 inner divs.
the left inner div should be of specific length (max length you expecting for a label,e.g.lab)
all inner divs are float left in this case
or any alternative way
basically you need to fix the positions anyway.
Thanks
Sam

Answer 3

Put your titles and buttons inside an inline element and give them a fixed width large enough to accommodate. No example of code or anything but you don't appear to need one Hope it fixes your problem.