Positioning spans inside divs - html

Question

This is the current output of my code,
Here I want to position the minus icon to top left like this (I edited the following image using paint) ,
I have included my code below.Here I tried to set the position of the minus span to absolute and It going to the corner of the top.And I don't want it to happen.Is there any way to do this?, I really appreciate your help.I'm trying to do for whole day.
<div class="left-bar-sm">
<div class="left-bar-sm-header">
Quantity (0)
</div>
<div class="left-bar-sm-body">
<div class="left-bar-sm-nested">
<span>Samaposha</span>
<br>
<span>2 x Rs 28.00 = Rs 56.00</span>
<span style="float: right;"><i class="fas fa-minus-circle"></i> <i class="fas fa-trash"></i></span>
</div>
</div>
.left-bar-sm-header {
background-color: #333333;
width: auto;
height: 50px;
margin-top: 5px;
border: 1px solid #595E57;
text-align: center;
padding: 5px;
font-size: 18px;
overflow-x: auto;
}
.left-bar-sm-body {
height: 450px;
border: none;
border-bottom: 2px dashed #595E57;
overflow-x: auto;
}
.left-bar-sm-nested {
margin-top: 5px;
background-color: #333333;
border: 1px solid #595E57;
padding: 20px;
}

Answer 1

In this Case you can use CSS flex. I have slightly changed your HTML.
Try this:
.left-bar-sm {
background: #252525;
padding: 10px;
color: #fff;
}
.left-bar-sm-header {
background-color: #333333;
width: auto;
height: 50px;
margin-top: 5px;
border: 1px solid #595E57;
text-align: center;
padding: 5px;
font-size: 18px;
overflow-x: auto;
}
.left-bar-sm-body {
height: 450px;
border: none;
border-bottom: 2px dashed #595E57;
overflow-x: auto;
}
.left-bar-sm-nested {
display: flex;
flex-direction: column;
margin-top: 5px;
background-color: #333333;
border: 1px solid #595E57;
padding: 20px;
}
.left-bar-sm-nested > div {
display: flex;
justify-content: space-between;
}
.left-bar-sm-nested > div span {
line-height: 25px;
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css" rel="stylesheet"/>
<div class="left-bar-sm">
<div class="left-bar-sm-header">
Quantity (0)
</div>
<div class="left-bar-sm-body">
<div class="left-bar-sm-nested">
<div>
<span>Samaposha</span>
<span style="float: right;"><i class="fas fa-minus-circle"></i><span>
</div>
<div>
<span>2 x Rs 28.00 = Rs 56.00</span>
<span><i class="fas fa-trash"></i></span>
</div>
</div>
</div>
</div>

Answer 2

You can wrap the text and right side icons in two divs.
Then using flex modify the layout to show left and right side.
.left-bar-sm-header {
background-color: #333333;
width: auto;
height: 50px;
margin-top: 5px;
border: 1px solid #595E57;
text-align: center;
padding: 5px;
font-size: 18px;
overflow-x: auto;
}
.left-bar-sm-body {
height: 450px;
border: none;
border-bottom: 2px dashed #595E57;
overflow-x: auto;
}
.left-bar-sm-nested {
color: #fff;
margin-top: 5px;
background-color: #333333;
border: 1px solid #595E57;
display:flex;
}
.right {
margin-left: auto;
display: flex;
flex-direction: column;
justify-content: space-between;
padding: 10px;
}
.left {
padding: 20px;
flex: 1;
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css" rel="stylesheet"/>
<div class="left-bar-sm">
<div class="left-bar-sm-header">
Quantity (0)
</div>
<div class="left-bar-sm-body">
<div class="left-bar-sm-nested">
<div class="left">
<span>Samaposha</span>
<br>
<span>2 x Rs 28.00 = Rs 56.00</span>
</div>
<div class="right"><i class="fas fa-minus-circle"></i> <i class="fas fa-trash"></i></div>
</div>
</div>