Styling Table Cell (TD) in HTML Table using CSS

I am trying to display 5 columns table inside a panel.

Below is what I am trying to do that is not working properly:

somehow the image is not displaying properly. This is the link: https://i.sstatic.net/ED02wH5Z.png

I want SKU, Description, Unit price, Quantity and Amount to be displayed in one single line rather than up and down and then I want service fee to come as $0.69 on next line and then at the bottom, I want "Total amount paid" with 32.69 displayed on one line. description and amount is coming from code behind and the digits can change to be three digits or two digits.

I want something like this below image to be displayed with the titles at the top that says SKU, Description, Unit price, Quantity and Amount.

  link for the image: https://i.sstatic.net/XICr7iKc.png

This is the code that I tried:

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" />
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
<div class="container">
    <div class="panel panel-primary">
    <div class="panel-heading">Transaction Details</div>
    <div class="panel-body">
        <table>
          <thead>
            <tr>
              <th scope="col">SKU</th>
              <th scope="col">Description</th>
              <th scope="col">Unit Price</th>
              <th scope="col">Quantity</th>
              <th scope="col">Amount</th>
            </tr>
          </thead>
              <tbody>
            <tr>
              <td ><span id="lblSKU">CCB</span>
                  <br /><br /><br /><br />
                  Total Amount Paid
              </td>
              <td >
                  <span id="lblDesc">chocolate Certificate</span>
                  <br /><br />
                  <span id="lblServFee">Service Fee</span>
              </td>
              <td ><span id="lblUnitPrice">$32.00</span></td>
              <td><span id="lblQuantity">1</span></td>
               <td><span id="lblAmount">$32.00</span>
                   <br /><br />
                    <span id="lblServiceFee">$0.69</span>
                    <br /><br />
                   <span id="lblTotAmount">32.69</span>
               </td>
            </tr>
            </tbody>
          </table>
        </div>
    </div>
</div>

is it possible to align the digits too in the amount column.

any help will be appreciated.