Position div dans flex

Salut à tous,
j'ai un problème pour positionner le bloc error à côté du bloc accountInfo. Le bloc error change de taille selon le contenu et comme les 2 blocs sont dans un Flex centré, le tout le décale pour ce centrer, normal.
Comment faire pour centrer en permanence le bloc accountInfo en gardant le bloc error juste à côté ?
J'espère que j'ai été clair
Merci d'avance

<div class="gridContainer">
	<div id="accountContainer">
        <div id="logo></div>
			<div id="accountInfo">
				<div></div>
				   <div id="error"></div>
			</div>
    </div>
 
    <div id="documentsGrid"></div>
    <div id="buttonContainer"></div>
</div>

.gridContainer {
    padding: 0px;
    display: flex;
    flex-direction: row;
    justify-content: center;
    flex-wrap: wrap;
}

#accountContainer {
    display: flex;
    flex-direction: row;
    justify-content: center;
    width: 90%;
    height: 140px;
    margin-top: 10px;
}

#documentsGrid {
    width: 90%;
    height: 60%;
}

#buttonContainer {
    max-height: 50px;
    width: 90%;
    margin-top: 20px;
    text-align: right;
}

Bonjour et bienvenue,

me suis fait avoir par l'indentation de ton code HTML : il y a 3 flex items, pas 4.

Tu dis vouloir le bloc accountInfo à côté du bloc error mais ce dernier est enfant du 1er : c'est "logo + div sans classe enfant de accountInfo" que tu souhaites centrer, avec une partie de lui-même (error) sur sa droite ?
Le plus simple serait que tu crées un Codepen avec 2 fois cet exemple (avec des classes au lieu d'id pour éviter la duplication d'id) et dans l'un peu de contenu, dans l'autre beaucoup de contenu + indication textuelle ou graphique des éléments devant être centrés ("je dois être centré" ou une belle bordure ou couleur de fond )

Les 2 autres blocs avec leur width: 90% doivent occuper les 2e et 3e lignes, est-ce bien cela ?