HTML items not getting positioned on the right using CSS - html

Question

I am trying to align my items list to the right side of the web page. Also, I wanted to have a vertical thin separator between the left and center data structure (hierarchy) and my right list.
Right.component.html :
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<div class="header-divider">
<ul class="selection-list">
<li *ngFor="let item of getSelections()">
<button class="btn" (click)="deselect(item)" *ngIf="item.selected">
<i class="fa fa-close"> {{ item.displayName }} </i>
</button>
</li>
</ul>
</div>
Right.component.css :
.selection-list {
list-style: none;
margin-top: 5px;
margin-bottom: 10px;
line-height: 15px;
font-size: 16px;
color: #555;
padding-left: 23px;
text-transform: capitalize;
right: 0;
}
.btn {
border: none;
padding: 0;
background: none;
}
.header-divider {
border-left:1px solid #38546d;
height:30px;
position:relative;
right:20px;
top:10px;
}
Right now, it just appears below my hierarchy structure. What should I do to fix this?

Answer 1

I always favor the use of flexbox which is a great simple way to use all available space inside a container. This is how I would do it:
-----(Edited)-----
.flex-container {
display: flex;
height: 50px;
border: solid 1px peru;
}
.sendToRight {
margin-left: auto;
}
<div class="flex-container">
<div class="PLCheck">
fortuneSelect
</div>
<div class="sendToRight"> <!-- add class to div for manipulation -->
rightSideComp
</div>
</div>
In this example, the margin-left:auto makes your .sendToRight div move all the way to the right. You could also use justify-content: space-between; in your container element to achieve the same result.