html - Unable to left align the div items

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>

question from:https://stackoverflow.com/questions/66065816/unable-to-left-align-the-div-items

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>