Spacing elements evenly in a div

Question

I have a div that has 3 elements in it that are a p tag with a date, a div with 5 icons in a row, and another p tag with "flair" word. these elements are all displayed in a row. The p tags are place exactly where I want, but the icon container in-between them moves around depending on the length of the flair and/ or date. Is there any way I can make it so that icon container is always exactly in the center no matter how long the date/flair are?

Here is my jsx

import React from 'react'
import fireIconImage from '../images/fireIcon.png'


export default function FeedPost(props) {
    return (
        <div className="feedPostContainer">
            <h2 className="feedPostTitle">{props.title}</h2>
            <p className="feedPostText">{props.text}</p>
            <div className="feedPostDetails">
                <p className="feedPostDate">11/6/2022</p>
                <div className="feedPostFireIconContainer">
                    <img className="feedPostFireIcon feedPostFireIcon1"src={fireIconImage} alt="fire icon"></img>
                    <img className="feedPostFireIcon feedPostFireIcon2" src={fireIconImage} alt="fire icon"></img>
                    <img className="feedPostFireIcon feedPostFireIcon3" src={fireIconImage} alt="fire icon"></img>
                    <img className="feedPostFireIcon feedPostFireIcon4" src={fireIconImage} alt="fire icon"></img>
                    <img className="feedPostFireIcon feedPostFireIcon5" src={fireIconImage} alt="fire icon"></img>
                </div>
                    <p className="feedPostFlaire">{props.flaire}</p>
            </div>
        </div>
    )
}

Here is my css

.feedPostContainer {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  max-width: 750px;
  margin-bottom: 10px;
  padding: 10px;

  border-radius: 10px;
  background-color: var(--color4);
}

.feedPostTitle {
  align-self: center;
  justify-self: center;
}

.feedPostDetails {
  padding: 10px;
  background-color: grey;
  width: 100%;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
}

.feedPostFireIconContainer {
  background-color: red;
}

.feedPostFlaire {
  background-color: green;
}

.feedPostDate {
  background-color: blue;
}

.feedPostFireIcon {
  width: 20px;
}