how to align multiple line text as the column of the table - html

Question

I have to display text as follows(please notice that the month should be properly aligned with the months of other two rows, time should be properly aligned with the time of other two rows and so is the date as follows):
and all these values are coming from two way data binding inside a div in an angular 7 project as follows:
<div *ngFor="let date of dates">
{{date.month}} {{date.day}} {{date.time}}
<div>
please help me to display these values in the exact same style style.

Answer 1

Just make your Angular create the following HTML structure:
.table {
display: table;
}
.row {
display: table-row;
}
.cell {
display: table-cell;
padding: 0 10px;
}
<div class="table">
<div class="row">
<span class="cell">December</span>
<span class="cell">15,2015</span>
<span class="cell">5 a.m.</span>
</div>
<div class="row">
<span class="cell">October</span>
<span class="cell">10, 2010</span>
<span class="cell">6 p.m.</span>
</div>
<div class="row">
<span class="cell">March</span>
<span class="cell">12, 2012</span>
<span class="cell">12 a.m.</span>
</div>
</div>
In your Angular, that would be
<div class="table">
<div class="row" *ngFor="let date of dates">
<span class="cell">{{date.month}}</span>
<span class="cell">{{date.day}}</span>
<span calls="cell">{{date.time}}</span>
<div>
</div>

Answer 2

you can simply do this:
<div *ngFor="let date of dates">
<span>{{date.month}}</span><span>{{date.day}}</span><span>{{date.time}}</span>
<div>
And give some style to these span (padding, margin)...

Answer 3

HTML:
<div [ngClass]="'container'" *ngFor="let date of dates">
<div>{{date.month}}</div>
<div>{{date.day}}</div>
<div>{{date.time}}</div>
</div>
CSS:
.container{
width:100%;
overflow:hidden;
}
.container > div{
width:33.333%;
float:left;
}

Answer 4

Stacklitz solution
Follow below stacklitz code for solution
css
.wrapper{
display: flex;
justify-content: space-between;
}
.colm{
min-width:100px;
}
component
<div class=" row wrapper" *ngFor="let date of dates">
<div class="colm">{{date.month}}</div>
<div class="colm">{{date.day}} </div>
<div class="colm">{{date.time}}</div>
<div>