Display User Name To Right On My 'Mat-toolbar' - html

Question

I have an Angular 5 project and on the toolbar I have the following details:
Sub-menu button
Company logo
Company name
These three are fine but now I am being asked to display the following details to the right of the main menu
Person icon
Logged in username
Below is the following code in the app.component.html file
<mat-sidenav-container>
<mat-sidenav #sidenav mode="over" opened="false">
<div class="closeButton">
<mat-icon (click)="sidenav.toggle()" title="Click to close sub-menu.">clear</mat-icon>
</div>
<a>Sidenav content</a>
<a>This is a really long nameeeeee</a>
<a>Sidenav content</a>
</mat-sidenav>
<mat-toolbar>
<mat-icon class="subMenuIcon" (click)="sidenav.toggle()" title="Click to open sub-menu.">reorder</mat-icon>
<img src="./assets/images/Crest.jpg">AJ Bell Information Interface
<span flex></span>
<div style="font-size: 15px">
<mat-icon style="font-size: 25px">person</mat-icon>
USERNAME
</div>
</mat-toolbar>
</mat-sidenav-container>
<router-outlet>
<div>this</div>
<div>is</div>
<div>the</div>
<div>main</div>
<div>body</div>
</router-outlet>
As you can see I have tried using <span flex></span> and also float: right etc but with no joy at all.
I know it will be simple but I'm having coding tunnel and cant think of a solution

Answer 1

You can use flex: 1 1 auto;
Have a look at this example