How to align p-table and p-chart elements side by side - css

Question

I have a very little experience developing UI but I wanted to accomplish a task quickly where I have to put a p-table and p-chart elements side by side. I tried to use flex layout as well as float left and right as below but not getting the expected result. How can this be fixed?
<div fxLayout="row" fxLayoutAlign="start center">
<div fxFlex="50%" class="floatLeft">
<p-table [value]="summaryList" [scrollable]="true" scrollHeight="200px"
[resizableColumns]="true" [style]="{width:'500px'}">
<ng-template pTemplate="caption">
XXX Summary
</ng-template>
<ng-template pTemplate="header">
<tr>
<th *ngFor="let col of summaryColumns" [pSortableColumn]="col.field">
{{col.header}}
<p-sortIcon [field]="col.field"></p-sortIcon>
</th>
</tr>
</ng-template>
<ng-template pTemplate="body" let-summaryList>
<tr>
<td *ngFor="let col of summaryColumns">
{{summaryList[col.field]}}
</td>
</tr>
</ng-template>
</p-table>
</div>
<div class="col-md-4 content-section implementation" fxFlex="50%" class="floatRight">
<p-chart type="line" [data]="dailyData" title="XXX Chart" extender="overrideXAxis"></p-chart>
</div>
</div>

Answer 1

You can try doing this.
<div class="container">
<p-table [value]="summaryList" height="200" [scrollable]="true" scrollHeight="100px" [resizableColumns]="true" [style]="{width:'50%', float:'left'} ">
<ng-template pTemplate="caption">
My Awesome Summary
</ng-template>
<ng-template pTemplate="header">
<tr>
<th *ngFor="let col of summaryColumns" [pSortableColumn]="col.field">
{{col.header}}
<p-sortIcon [field]="col.field"></p-sortIcon>
</th>
</tr>
</ng-template>
<ng-template pTemplate="body" let-summaryList>
<tr>
<td *ngFor="let col of summaryColumns">
{{summaryList[col.field]}}
</td>
</tr>
</ng-template>
</p-table>
<p-chart height="250" [responsive]="false" type="bar" [data]="data" [options]="options" [style]="{width:'48%', float:'right'}"></p-chart>
</div>
then add style to your component.css
.container{
display: flex;
justify-content: center;
align-items: center;
}