Angular & Bootstrap4: How to align multiple radio buttons with variable length label vertically?

Question

I trying to list of radio buttons with variable length label as follows.
The problem is that as each label has different length, the radio buttons do not align vertically.
How can I make them aligned properly?

<div class="row">
 <div class="form-check form-check-inline" *ngFor="let t of accountTitles; let index = index; let first = first; let last = last;">
  <input class="form-check-input" type="radio" name="accountTitle" id="accountTitle_{{t.accountTitleId}}" value="t.accountTitleId" [checked]="t.accountTitleId == accountTitleId">
  <label class="form-check-label"  [ngClass]="{'has-subsidiary' : t.subsidiaryAccountTitles.length > 0}" for="accountTitle_{{t.accountTitleId}}">{{t.accountTitleName}}</label>
 </div>
</div>

Answer 1

You could set a fixed width on the labels, and then any overflow text would truncate with ellipsis (...)

https://www.codeply.com/go/I8sCvM6oCT

.form-check-label {
    width: 80px;
    max-width: 80px;
    text-overflow: ellipsis;
    white-space: nowrap;
    overflow: hidden;
}

---

Alternately, a responsive approach is to use the grid columns, and text-truncate class for the labels. No extra CSS is needed :

https://www.codeply.com/go/Lmby8RaHab

<div class="row">
           <div class="form-check form-check-inline col-3">
                    <input class="form-check-input" type="radio" name="accountTitle">
                    <label class="form-check-label text-truncate">some label</label>
           </div>
           <div class="form-check form-check-inline col-3">
                    <input class="form-check-input" type="radio" name="accountTitle">
                    <label class="form-check-label text-truncate">aaa</label>
           </div>
           (... more form-check)
</div>