Display Array List From Left To Right - css

Question

I am trying to display an array list from left to right with a div scroll. But it become top to bottom. How should I do to solve it? This my demo code as you reference.
HTML
<div>
<h2 class="ylet-primary-500 alignleft">Sessions</h2>
</div>
<div style="clear: both;"></div>
<div *ngFor="let batch of batches">
<div class="box">
<div>
<h3 class="classes">
{{batch.month}}
<span class="chips"> </span>
</h3>
</div>
<div style="clear: both;">
<p class="timings">
<mat-icon matPrefix>access_time</mat-icon><span>{{batch.time}}</span>
<span class="slots"> <mat-icon>list_alt</mat-icon>{{batch.slots}}</span>
</p>
</div>
</div>
</div>
CSS
.box {
border: 1px solid #ccc;
padding: 4px;
width: 70%;
direction: rtl;
display: inline-block;
}

Answer 1

Try to wrap loop div container with div container and add css flex style.
<div class="container">
<div *ngFor="let batch of batches">
<div class="box">
<div>
<h3 class="classes">
{{batch.month}}
<span class="chips"> </span>
</h3>
</div>
<div style="clear: both;">
<p class="timings">
<mat-icon matPrefix>access_time</mat-icon><span>{{batch.time}}</span>
<span class="slots"> <mat-icon>list_alt</mat-icon>{{batch.slots}}</span>
</p>
</div>
</div>
</div>
.container {
display: flex;
flex-wrap: wrap;
}