I'm new to CSS and struggling with aligning content within a div. Specifically, I can't get the actual price (striked off) to display next to the discounted price in the card - it keeps appearing underneath. Any ideas on how I can improve my CSS to fix this? Thank you.
https://i.sstatic.net/X8BBI.png
Snippet of my code:
#products{
padding-top:3%;
display:flex;
justify-content:center;
}
#product-content {
margin-bottom:5%;
padding-bottom:2%;
}
.mat-card-title {
cursor:pointer;
white-space:pre-line;
}
#tag {
float:left;
margin-right:1rem;
}
#category {
margin-left:25%;
position:relative;
}
#wishlist {
margin-left:auto;
margin-right:auto;
}
#discounted-price {
float:right;
}
#actual-price {
text-decoration:line-through;
}
#add-to-cart {
float:right;
}<div class="container" id="products">
<mat-card class="product-content" *ngFor="let product of products" id="product-content">
<mat-card-header>
<mat-card-title (click)="navigate()">{{ product.name }}</mat-card-title>
</mat-card-header>
<mat-card-content>
<div>
<div id="tag">{{ product.tags }}</div>
<div id="category">{{ product.category }}</div>
<div id="wishlist" (click)="addToWishList(product)">
<i [ngStyle]="{ color: product.isInWishList ? 'yellow' : '' }" class="fa fa-star-o fa-2x" aria-hidden="true"></i>
</div>
<div id="discounted-price">Rs. {{ getDiscountedPrice(product) }}/-</div>
<div id="actual-price" *ngIf="product.discountedPerc === 0; else displayOriginalPrice">-</div>
<ng-template id="displayOriginalPrice" #displayOriginalPrice>{{ product.actualPrice }}</ng-template>
<div id="add-to-cart">ADD TO CART</div>
</div>
</mat-card-content>
</mat-card>
</div>