How to display child component from left to right - css

Question

I am rendering child component in for loop from parent component. My parent component should be float to right at the bottom of screen then after each render of child component should be render to left to my parent component
Parent component :
<div class="row">
<div class="content">
<div class="row">
<div class="col-md-12" id="ng-chat-view">
<div class="col-md-3">
<div id="ng-chat-people" [ngClass]="{'ng-chat-people-collapsed':isCollapsed}">
<a href="javascript:void(0);" class="ng-chat-title shadowed" (click)="onChatTitleClicked($event)">
<span>
Farmer List
</span>
</a>
<input *ngIf="!isCollapsed" id="ng-chat-search_friend" type="search" placeholder="Search" [(ngModel)]="search" (ngModelChange)="getFarmerBySearchVal(search)"
/>
<ul id="ng-chat-users" *ngIf="!isCollapsed">
<li *ngFor="let user of farmers">
<div *ngIf="!user.imageUrl" class="icon-wrapper">
<i class="user-icon"></i>
</div>
<img *ngIf="user.imageUrl" alt="" class="avatar" height="30" width="30" src="{{user.imageUrl}}"/>
<strong title="{{user.user}}" (click)="openChatWindow(user, true)">{{user.name}}</strong>
</li>
</ul>
</div>
</div>
<div class="col-md-9 m-l">
<div *ngFor="let user of userInfo; let i = index">
<div>
<app-chatwindow [userInfo]="user" (onWindowCloseNotify)="onWindowCloseDeleteUserFromList($event)"></app-chatwindow>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
I have attached screenshot of desired output :
Parent component should be:
Child component should be:
Current output:

Answer 1

Consider this example.
Parent should be floated to the right, as well as the childrens.
.chat {
float: right;
list-style: none;
}
.chat li {
width: 160px;
height: 200px;
background: red;
float: right;
margin-left: 10px;
}
<ul class="chat">
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
</ul>