Two cards are currently being displayed on the page:
<ion-header>
<ion-navbar>
<ion-title>Home</ion-title>
</ion-navbar>
</ion-header>
<ion-content padding>
<ion-card class="offersCard">
<ion-card-header>
<b>Company Name</b>
<br/>
<b>Dealer</b>
</ion-card-header>
<ion-card-content>
<div>
<div class="floatLeft imgStyle">
Image
</div>
<div class="floatRight">
<div>
Offer Descriptions:
<br/>
Offer Descriptions:...
Offer Descriptions:...
Offer Descriptions:...
Offer Descriptions:...
Offer Descriptions:...
</div>
</div>
</div>
<div>
<div class="floatLeft alignTxt">
Price:
d
</div>
<div class="floatRight fullBtn">
<button ion-button primary>CHECK OFFER</button>
</div>
</div>
</ion-card-content>
</ion-card>
<ion-card class="offersCard">
<ion-card-header>
<b>Company Name</b>
<br/>
<b>Dealer</b>
</ion-card-header>
<ion-card-content>
<div>
<div class="floatLeft imgStyle">
Image
</div>
<div class="floatRight">
<div>
Offer Descriptions:
<br/>
Offer Descriptions:
</div>
</div>
</div>
<div>
<div class="floatLeft alignTxt">
Price:
d
</div>
<div class="floatRight fullBtn">
<button ion-button primary>CHECK OFFER</button>
</div>
</div>
</ion-card-content>
</ion-card>
</ion-content>
The issue arises when a card with lengthy description text is displayed, causing it to resize and misalign instead of maintaining the specified height and weight in the SCSS file:
.offersCard{
.floatRight{
float: right;
white-space: normal;
margin-left: 4em;
}
.floatLeft{
float: left;
width: 10em;
vertical-align: middle;
}
div{
display: flex;
}
.imgStyle{
width: 150px;
height: 150px;
}
.fullBtn{
float: right;
margin-right: 0em
}
.alignTxt{
margin-top: 1em;
}
}
https://i.stack.imgur.com/kKwx5.png
Furthermore, despite setting the "Check Offer" button to float to the right, it appears at the center of the card.
For a complete functioning example, please visit this StackBlitz link