On the third line, I want the circle images to be all the way to the left while the placeholder is all the way to the right. It seems like the flex container is automatically expanding to fill the space and preventing the circle images from being next to each other.
Here's a CodePen to the work-in-progress: https://codepen.io/psychedelicseal/pen/VwoxjEg
.pokemon-card { width: 300px; height: 100px; background-color: antiquewhite; border-radius: 50px 0 0 50px; display: flex; overflow: hidden; align-items: center;}.sprite { min-width: 100px; width: 100px; display: flex; justify-content: center;}.sprite>img { max-width: 85%; max-height: 85%;}.stats { width: 100%; display: grid; grid-template-rows: 31px 18px 20px 22px; gap: 3px;}.line-one,.line-two,.line-three,.line-four { display: flex; align-items: center; width: 100%;}#name { grid-area: name; font-size: 30px;}#form { grid-area: form; display: flex; width: 100%; height: 100%; justify-content: end;}#form>img { min-height: 0; min-width: 0;}.types { width: 100%; height: 100%; display: flex; justify-content: flex-start; gap: 3px;}#type-one,#type-two { display: flex; width: 100%;}#type-one>img,#type-two>img { max-height: 100%; max-width: 100%; object-fit: contain;}#status>img { max-height: 100%; max-width: 100%;}.hp-container { width: 100%; height: 20px; background-color: black; border-radius: 10px 0 0 0;}<div class="pokemon-card"><div class="sprite"><img src="https://archives.bulbagarden.net/media/upload/7/73/0015Beedrill-Mega.png"></div><div class="stats"><div class="line-one"><div id="name">Beedrill</div><div id="form"><img src="https://archives.bulbagarden.net/media/upload/c/cc/Dream_Beedrillite_Sprite.png"></div></div><div class="line-two"> Lv. 200</div><div class="line-three"><div class="types"><div id="type-one"><img src="https://archives.bulbagarden.net/media/upload/2/26/Bug_icon_LA.png"></div><div id="type-two"><img src="https://archives.bulbagarden.net/media/upload/b/b4/Poison_icon_LA.png"></div></div><div id="status"><img src="https://placehold.co/208x64"></div></div><div class="line-four"><div class="hp-container"><div class="currentHP"></div></div></div></div></div>I've tried setting widths to the original grid that contains the line
.stats { width: 100%; display: grid; grid-template-rows: 31px 18px 20px 22px; gap: 3px;}To the line itself
.line-one, .line-two, .line-three, .line-four { display: flex; align-items: center; width: 100%;}To the flex container I want to occupy the left side of the line
.types { width: 100%; height: 100%; display: flex; justify-content: flex-start; gap: 3px;}And to the child containers that hold the images
#type-one, #type-two { display: flex; width: 100%;}