[Fixed] How to put a div next to a mat-label

Issue

I have an Angular project in which I’m using Angular Material.

I need to put a div in the same line as a mat-label but I don’t know how to do that.

This is what I’m trying to achieve (the box with the lighter blue background color is the div I’m talking about):

This is what I have so far:

My html:

  <div class="container__irr--holding">
    <span>موجودی ریالی:</span>
    <span>
     100,000,000
    </span>
  </div>

  <mat-label>پرداختی</mat-label>

  <mat-form-field appearance="fill">
    // I haven't included code for mat-form-field to make sample code more readable and shorter
  </mat-form-field>

My scss:

.container__irr--holding {
      display: flex;
      background: #465490;
      padding: 2px;
      border-radius: 3px;
    }

Solution

One possible way is to add justify-content: space-between; to .container__irr--holding

.container__irr--holding {
  display: flex;
  justify-content: space-between;
  background: #465490;
  padding: 2px;
  border-radius: 3px;
}

then modify the html to look like this:

  <div class="container__irr--holding">
    <div>
    <span>موجودی ریالی:</span>
    <span>
     100,000,000
    </span>
    </div>
    <mat-label>پرداختی</mat-label>
  </div>

Working Stackblitz