Issue aligning div's using width and float

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>