HTML <a> tag displaces the text to the new line in a Bootstrap grid system

I am having a problem with the frontend of my page when I try to inline the label and the link of the mother and father elements.

I tried using the following code:

<div class="row">
  <!-- Start mother and father row -->
  <div class="mb-2 col-lg-6">
    <div class="row">
      <div class="text-md-end text-muted col-md-2 col-lg-4">
        Mother
      </div>
      <div>
        <a *ngIf="horse.mother"
           [routerLink]="['/horses', horse.mother.id, 'detail']"
        >
          {{horse.mother.name}}
        </a>
      </div>
    </div>
  </div>

  <div class="mb-2 col-lg-6">
    <div class="row">
      <div class="text-md-end text-muted col-md-2 col-lg-4">
        Father
      </div>
      <div>
        <a *ngIf="horse.father"
           [routerLink]="['/horses', horse.father.id, 'detail']"
        >
          {{horse.father.name}}
        </a>
      </div>
    </div>
  </div>
  <!-- End mother and father row -->
</div>

My frontend looks like this

How can I inline the label and the link?

div is a block level element . block level elements automatically displayed on a new line . Since the text "Mother" is in it's own div and the variable is in another div you get that line break .

To fix put the label and the variable inside the same div :

<div class="mb-2 col-lg-6">
    <div class="row">
      <div class="text-md-end text-muted col-md-2 col-lg-4">
        Mother
        <a *ngIf="horse.mother" [routerLink]="['/horses', horse.mother.id, 'detail']">
          {{horse.mother.name}}
        </a>
      </div>
    </div>
  </div>

Same for the father part .