Having trouble aligning elements

Hello,

I’m having difficulty getting the dollar amounts of the pricing element lined up completely on the right side. I tried using text-align: right (which is what it is currently at), and float: right. Neither is working the way I want it to. Any advice is greatly appreciated.

Thanks!

What if you used display: flex; and then use justify-content to place it where you want rather than what you currently have.

When doing that I got this (which is what I think you’re looking for)

That’s exactly what I’m looking for, however when I am using what you had said, I’m getting the prices one line below the other line. They aren’t showing up on the same line like you in the screenshot you took.

I think that’s because your <p> tags naturally create a line break afterward. If you switch those to <div> tags it should resolve that issue. Then you can use justify-content: space-between; in the #pricing selector and then you probably wouldn’t even need the .left and .right classes anymore.

Also, I just noticed that you have display: flex on your .left and .right classes. It should be on the parent of your flex items, which is #pricing.

I switched them to

tags, it didn’t seem to change anything. I also tried using display: flex and justify-content: space-between. I still wasn’t able to get it positioned like Roma had in their screenshot

    <div id="pricing">
      <div class="line-item">
        <div>SUBTOTAL</div>
        <div>$40.00</div>
      </div>
      <br>
      <div class="line-item">
        <div>SALES TAX</div>
        <div>$2.40</div>
      </div>
      <br>
      <div class="line-item">
        <div>SHIPPING</div>
        <div>$2.95</div>
      </div>
      <br>
      <div class="line-item">
        <div>ORDER TOTAL (Includes all discounts)</div>
        <div>$45.35</div>
      </div>
    </div>
.line-item {
  display: flex;
  justify-content: space-between;
}

Thank you so much! I was able to see what I was missing. I understand now to put a div as the parent element for the entire line.

1 Like