[FIXED] How to align elements to vertical line

Issue

I'm trying to make a website but ran into a problem. I need to align elements from div boxes to a vertical line. Something like in the picture (don't question my paint skills)

Here's my code:

<div class="main-block">
    <div class="sub-block">
        <a class="part1">(light gray block)</a>
        <a class="part2">(dark gray block)</a>
    </div>
</div>

I need to keep the .part1 and .part2 in .sub-block div.

Solution

Table layout can do this:

.main-block {
  display:table;
}
.sub-block {
  display:table-row;
}

.sub-block > * {
  display:table-cell;
  padding:10px;
}
.part1 {
  text-align:right;
}

<div class="main-block">
    <div class="sub-block">
        <a class="part1">aaa</a>
        <a class="part2">bb</a>
    </div>
    <div class="sub-block">
        <a class="part1">a a aaaaa</a>
        <a class="part2">b</a>
    </div>
    <div class="sub-block">
        <a class="part1">aaaaaaaaaaaaa</a>
        <a class="part2">(dark gray block)</a>
    </div>
    <div class="sub-block">
        <a class="part1">a</a>
        <a class="part2">bbbbbbbbbb</a>
    </div>
</div>

Answered By - Temani Afif

Answer Checked By - Cary Denson (PHPFixing Admin)