css – Make 2 each side of a div HTML

I’m attempting to make an account having a progression bar for ranking system. I intend to present at the right as well as left the existing ranking => > following ranking as well as at the center the progression bar. Sorry for my english below an instance:

What i desire
Instance tried

As Well As below what i obtained
My effort

<< div course=" card">
<> < div course=" progression userProfileProgress myProfileProgress">>.
<< h6 course=" current_rank">> 8< < div course=" determinate userProfileDeterminate" design=" size: 0%; background-color: # 00d871;"><> .
<< h6 course=" next_rank">> 7< .
<.

 myProfileProgress {
screen: grid;
grid-template-columns: 1fr 1fr 1fr;
grid-template-rows: 1fr 1fr 1fr;
grid-template-areas: "current_rank MyProfileProgress next_rank";
margin-top: 10px;
margin-bottom: 10px;
margin-left: 17px;
margin-right: 17px;.
}

. current_rank {
grid-area: current_rank;.
}

. MyProfileProgress {
grid-area: MyProfileProgress;.
}

. next_rank {
grid-area: next_rank;.
}

. card.myProfileProgress {
background-color: var(-- color-dark-variant);.
placement: loved one;.
top: 15px;.
}

. card.userProfileProgress,. userProfileDeterminate {
elevation: 7px;.
border-radius: 5px;.
}

. progression {
placement: loved one;.
elevation: 4px;.
screen: block;.
size: 100%;.
background-color: #acece 6;.
border-radius: 2px;.
margin: 0.5 rapid eye movement 0 1rem 0;.
overflow: concealed;.
}