CSS: Position separate elements properly within a character's body

What I want to achieve

Position separated facial parts correctly within a character in a web app

Resources

Image Files

• Body: character-body.png
• Left Ear: character-left-ear.png
• Right Ear: character-right-ear.png

Codes

HTML

• place each img element inside a div element.
• this div element will be a container as a reference position of each img element by CSS

<div className="character">
  <img src="/src/assets/character-body.png" alt="Character body" className="character-body" />
  <img src="/src/assets/character-left-ear.png" alt="Left ear" className="ear left" />
  <img src="/src/assets/character-right-ear.png" alt="Right ear" className="ear right" />
</div>

CSS

• set position: relative for the container class and position: absolute for each part
• set the container's width and height to the same value as the PNG file of the body
• set the Ear's width and height to the same as above
• make the body part fill the container full by width: 100% and height: 100% because it's the main part of the character
• set the top and left (or right) properties of each part to locate it correctly in the body

/* Character styles */
.character {
    position: relative;
    width: 300px; /* Adjust based on the image file*/
    height: 400px; /* Adjust based on the image file */
}

/* Body styles */
.character-body {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

/* Ear styles */
.ear {
    position: absolute;
    width: 50px; /* Adjust based on the image file */
    height: 100px; /* Adjust based on the image file */
}

.left {
    top: 50px; /* Adjust top to fit the body */
    left: 20px; /* Adjust left to fit the body */
}

.right {
    top: 50px; /* Adjust top to fit the body */
    right: 20px; /* Adjust right to fit the body */
}

Next Goal

check if this works for a responsive website as well.