Issue aligning div's using width and float - html

Question

So what I am trying to do is align these divs within a bootstrap card. My issue is, I am able to get the left half of it right, but I can't figure out how to align the far right elements. I am currently using width percentages to allow this to stay responsive, though I have one thing set as fixed due to pictures always being the same size.
<div class="card" style="width:65%;float:left;">
<h5 class="card-header">Window Latch Black (Small)</h5>
<div class="card-body clearfix text-center" style="width:100%;display:inline-block;background-color: aqua;">
<div class="cartimage" style="background-color:red;float:left">
<img class="rounded-circle" src="data:image/gif;base64,R0lGODlhAQABAIAAAHd3dwAAACH5BAAAAAAALAAAAAABAAEAAAICRAEAOw==" alt="Generic placeholder image" width="140" height="140">
</div>
<div class="carttext" style="height:50%;width:75%;background-color:green;">
khjg
</div>
<div class="cartamt" style="height:50%;width:75%;background-color:yellow;">
amt
</div>
<div class="cartprice" style="height:50%;width:15%;background-color:purple;float:right">
price
</div>
<div class="cartbutton" style="height:50%;width:15%;background-color:pink;float:right">
button
</div>
</div>
</div>

Answer 1

You need to adjust the order and replace 15% with 25% to have a total of 100% per row. You need to also set a height to parent container to use % height with child element:
.rounded-circle {
border-radius:50%;
vertical-align:top;
}
<div class="card" style="width:65%;float:left;">
<h5 class="card-header">Window Latch Black (Small)</h5>
<div class="card-body clearfix text-center" style="width:100%;display:inline-block;background-color: aqua;height:140px">
<div class="cartimage" style="background-color:red;float:left">
<img class="rounded-circle" src="data:image/gif;base64,R0lGODlhAQABAIAAAHd3dwAAACH5BAAAAAAALAAAAAABAAEAAAICRAEAOw==" alt="Generic placeholder image" width="140" height="140">
</div>
<div class="cartprice" style="height:50%;width:25%;background-color:purple;float:right">
price
</div>
<div class="carttext" style="height:50%;width:75%;background-color:green;">
khjg
</div>
<div class="cartbutton" style="height:50%;width:25%;background-color:pink;float:right">
button
</div>
<div class="cartamt" style="height:50%;width:75%;background-color:yellow;">
amt
</div>
</div>
</div>
By the way, since you are using Bootstrap V4 you can rely on flex to create your layout:
.rounded-circle {
border-radius: 50%;
vertical-align: top;
}
.cartprice {
background: red;
flex-basis: 75%;
}
.carttext {
background: green;
flex-basis: 25%;
}
.cartbutton {
background: blue;
flex-basis: 75%;
}
.cartamt {
background: yellow;
flex-basis: 25%;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<div class="card">
<h5 class="card-header">Window Latch Black (Small)</h5>
<div class="card-body text-center d-flex">
<div class="cartimage">
<img class="rounded-circle" src="data:image/gif;base64,R0lGODlhAQABAIAAAHd3dwAAACH5BAAAAAAALAAAAAABAAEAAAICRAEAOw==" alt="Generic placeholder image" width="140" height="140">
</div>
<div class="d-flex flex-wrap w-100" >
<div class="cartprice">
price
</div>
<div class="carttext">
khjg
</div>
<div class="cartbutton">
button
</div>
<div class="cartamt">
amt
</div>
</div>
</div>
</div>

Answer 2

If you are using bootstrap4, I don't understand why using float...Use boostartp4 [Flex Utilities] classes instead to make these type of grid layout...Also for good practice try to wrap your divs into a wrapper divs
Stack Snippet
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<div class="card">
<h5 class="card-header">Window Latch Black (Small)</h5>
<div class="card-body text-center p-0 d-flex no-gutters" style="background-color: aqua;">
<div class="cartimage" style="background-color:red;">
<img class="rounded-circle" src="data:image/gif;base64,R0lGODlhAQABAIAAAHd3dwAAACH5BAAAAAAALAAAAAABAAEAAAICRAEAOw==" alt="Generic placeholder image" width="140" height="140">
</div>
<div class="d-flex flex-column" style="flex: 2;">
<div class="carttext col" style="background-color:green;">
khjg
</div>
<div class="cartamt col" style="background-color:yellow;">
amt
</div>
</div>
<div class="d-flex flex-column col">
<div class="cartprice col" style="background-color:purple">
price
</div>
<div class="cartbutton col" style="background-color:pink">
button
</div>
</div>
</div>
</div>