https://i.sstatic.net/0ESwu.jpg
https://i.sstatic.net/GW0vz.jpg https://i.sstatic.net/EDWON.jpg
I am attempting to position the lower image to the right of the table. I believe there is a small setting that I'm overlooking, but I can't seem to locate it. In the code below, it's the saleForMonth element that I want to align to the right.
<mat-sidenav-container>
<mat-sidenav-content style="height:99vh;">
<div style="float:left; margin:22px 0px 0px 32px;">
<div style="text-align:center;">
</div>
<button mat-raised-button type="button" style="background-color:#3378a8;color:WHITE;height:45px;" (click)="sidenavOpen('sale',sidenav)">
<b>SALE</b>
</button>
<button mat-raised-button type="button" style="background-color:#3378a8;color:WHITE;height:45px;margin-left:2px;" (click)="sidenavOpen('upgrade',sidenav)">
<b>UPGRADE</b>
</button>
<div style="margin-top:53px">
<div>
<salesByPackage></salesByPackage>
</div>
<div style="margin-top:240px;">
<salesByCampaign></salesByCampaign>
</div>
</div>
</div>
<div class="container" style="margin-top:20px;float:right">
<div class="col-lg-9">
<mat-tab-group #tab mat-stretch-tabs (selectedTabChange)="onTabClick($event)">
<mat-tab label="SALES">
<orders></orders>
</mat-tab>
<mat-tab label="UPGRADES">
<upgrades></upgrades>
</mat-tab>
</mat-tab-group>
</div>
<!-- Change to this -->
<div class="col-lg-3">
<div>
<salesForMonth></salesForMonth>
</div>
</div>
</div>
</mat-sidenav-content>