Html – How to move image to bottom?

What you want to do to solve this problem is use flexbox.

First, let’s recognize what you want. You want the quote mark and the text at the top of the container boxes, and you want the avatar image and the name and the stars at the bottom. To do this, first you need to slightly modify your markup to add wrapping div elements.

What you want is for the quote mark and the text to be grouped together, and the avatar picture, the name, and the stars to be grouped together. To do that we wrap them in a div. If are going to possibly want to add styling like margins or padding or something on the wrapper elements, give them class names. If you do not need to add styling to them, you can forgo giving them classes.

<div class="box">
  <div class="review-text-wrapper">
    <img src="images/Utisci/quote.png" class="quote" loading="lazy">
    <p>TEXT</p>
  </div>
  <div class="user-stars-wrapper">
    <img src="images/Utisci/women.png" class="user" loading="lazy">
    <h3>NAME</h3>
    <div class="stars">
      <i class="fas fa-star"></i>
      <i class="fas fa-star"></i>
      <i class="fas fa-star"></i>
      <i class="fas fa-star"></i>
      <i class="fas fa-star-half-alt"></i>
    </div>
  </div>
</div>

Now that these elements are grouped, what you want to do is apply flexbox properties to the box so that the first group sits at the top and the second group sits at the bottom.

.box-container .box {
  /* .. Other box styles */

  display: flex; 
  flex-direction: column;
  flex-wrap: nowrap; 
  align-items: center; 
  justify-content: space-between;
}

First we turn on flexbox properties with display: flex. Then we set the direction that the elements will flow, the default is row but we want to set it to column. We don’t need the elements to wrap so we turn flex-wrap to nowrap. Then we set how the elements will be defined along the cross-axis of their direction with align-items. Since we set the flex-direction to column this will set the items in the horizontal center of the box. Then we use justify-content to define how the flex child elements will be set along the axis of the direction. Since the direction is column, this is how the items will arrange themselves vertically. We use space-between to say that they will have no space on the top or bottom, on the outside of the child elements, and put all available space in between them.

If you do this, what you should see is that the quote mark and the review text sit at the top of the box and the name and avatar and the stars will sit at the bottom. The space between them will flex based on how much vertical space the review takes up.

To learn more about flexbox, refer to the flexbox link at the top of this answer or to this cheat sheet guide from CSS-Tricks