Is there a way to display an array list from left to right with a div scroll, instead of top to bottom? I am having trouble achieving this. Here is my demo code for 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;
}