Unable to left align the div items - html

Question

I have this table where I have some items inside one of the TDs. I need them to be centerd but left-aligned.
Right now the td looks like this:
$12.95 is slightly to the left.
I want it to look like this:
Here's the code:
table {
border-collapse: collapse;
}
table tr {
text-align: center;
margin-bottom: 1px;
}
table td {
border: 1px solid #ddd;
font-size: 13px;
padding: 10px 0;
height: 90px;
width: 100px;
}
table tr td:last-child{
width: 200px;
}
.price-container .price-package-one,
.price-container .price-package-two,
.price-container .price-package-three {
display: flex;
justify-content: center;
margin-bottom: 10px;
}
.price-container .price-package-one .price-value p,
.price-container .price-package-two .price-value p,
.price-container .price-package-three .price-value p {
font-size: 15px;
font-weight: bold;
}
.price-container .price-package-one .price-value span,
.price-container .price-package-two .price-value span,
.price-container .price-package-three .price-value span{
font-size: 11px;
}
.price-container .price-package-one .price-saving p,
.price-container .price-package-two .price-saving p,
.price-container .price-package-three .price-saving p{
color: red;
font-weight: bold;
}
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" rel="stylesheet"/>
<table>
<tbody>
<tr>
<td>Name</td>
<td>Details</td>
</tr>
<tr>
<td>Item 1</td>
<td>
<div class="price-container">
<div class="price-package-one">
<div class="price-value text-left mr-5">
<p class="m-0">$2.49/month</p>
<span>(24 months)</span>
</div>
<div class="price-saving text-left">
<p class="m-0">Save <br>74%</p>
</div>
</div>
<div class="price-package-two">
<div class="price-value text-left mr-5">
<p class="m-0">$6.49/month</p>
<span>(06 months)</span>
</div>
<div class="price-saving text-left">
<p class="m-0">Save <br>47%</p>
</div>
</div>
<div class="price-package-three">
<div class="price-value text-left mr-5">
<p class="m-0">$12.95/month</p>
<span>(01 month)</span>
</div>
<div class="price-saving text-left">
<p class="m-0">Save <br>7%</p>
</div>
</div>
</div>
</td>
</tr>
</tbody>
</table>

Answer 1

Use a space-between alignment then add spaces on the sides. You can rely on bootstrap classes for this
table {
border-collapse: collapse;
}
table tr {
text-align: center;
margin-bottom: 1px;
}
table td {
border: 1px solid #ddd;
font-size: 13px;
padding: 10px 0;
height: 90px;
width: 100px;
}
table tr td:last-child{
width: 200px;
}
.price-container .price-value p {
font-size: 15px;
}
.price-container .price-value span{
font-size: 11px;
}
.price-container .price-saving p{
color: red;
}
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" rel="stylesheet"/>
<table>
<tbody>
<tr>
<td>Name</td>
<td>Details</td>
</tr>
<tr>
<td>Item 1</td>
<td>
<div class="price-container">
<div class="price-package-one d-flex justify-content-between px-3 mb-2">
<div class="price-value text-left">
<p class="font-weight-bold m-0">$2.49/month</p>
<span>(24 months)</span>
</div>
<div class="price-saving text-left">
<p class="font-weight-bold m-0 ">Save <br>74%</p>
</div>
</div>
<div class="price-package-two d-flex justify-content-between px-3 mb-2">
<div class="price-value text-left">
<p class="font-weight-bold m-0">$6.49/month</p>
<span>(06 months)</span>
</div>
<div class="price-saving text-left">
<p class="font-weight-bold m-0">Save <br>47%</p>
</div>
</div>
<div class="price-package-three d-flex justify-content-between px-3 mb-2">
<div class="price-value text-left">
<p class="font-weight-bold m-0">$12.95/month</p>
<span>(01 month)</span>
</div>
<div class="price-saving text-left">
<p class="font-weight-bold m-0">Save <br>7%</p>
</div>
</div>
</div>
</td>
</tr>
</tbody>
</table>