I'm currently working on styling a cart in Angular and facing an issue with aligning the price all the way to the right of the cart. I attempted using `space-between` within the outer div, which worked fine, but when applied to the inner div, it doesn't seem to work. Can anyone point out what I might be missing or misunderstanding in this case?
Here is a link to the code pen for reference: https://codepen.io/awschneider-dev/pen/rNedLJg
Below is the HTML structure:
<div class="container">
<h2>Cart</h2>
<div class="cartProducts" *ngFor="let item of items">
<hr>
<div class="item">
<div class="itemImage">
<img class="productImage" src="../../assets/images/phones/{{item.image}}" alt=""/>
</div>
<div class="information">
<div class="description">
<a href="#" class="fakeLink">Link to Item Page</a>
</div>
<div class="price">
{{item.price | currency}}
</div>
</div>
</div>
</div>
</div>
Below is the CSS styling used:
/* CSS Styles */
div.item{
display: flex;
}
div.information{
display: flex;
justify-content: space-between;
flex-direction: row;
}
div.container{
max-width: 1080px;
margin-left: auto;
margin-right: auto;
}
div.itemImage{
min-width: 150px;
}
img.productImage{
max-width: 100px;
max-height: 150px;
margin: 10px;
}
hr {
display: block;
margin-top: 0.5em;
margin-bottom: 0.5em;
margin-left: 1.0em;
margin-right: 1.0em;
border-style: inset;
border-width: 1px;
border: 0;
height: 1px;
background: #333;
background-image: linear-gradient(to right, #ccc, #333, #ccc);
}
a.fakeLink{
font-weight: 750;
font-size: larger;
text-decoration: none;
color: #0645AD;
}
List of resources referred to:
How to fix flex box with justify-content space between
Justify-content: space-between works incorrect
Your input and assistance would be greatly appreciated.