Текст Span смещает другие элементы (кнопки) вправо и влево. ⇐ Html

[Anonymous]

Я пытаюсь создать систему голосования для своего веб-сайта, но в настоящее время пытаюсь разобраться со стилем счетчиков голосов «за» и «против». Вот как это выглядит сейчас:


Как видите, проблема в том, что всякий раз, когда число справа или слева от кнопок становится большим, оно смещает другие элементы. Я хочу, чтобы две кнопки оставались в центре, а счетчик голосов «за» рос влево, а счетчик «против» — вправо. Таким образом, все будет отцентрировано.
Вот мой текущий код CSS:
.upvoteButtonsContainer{
display: flex;
justify-content: center;
margin-top: 15px;
}

.upvoteButton{
margin-right: 2px;
border: none;
background-color: transparent;
box-shadow: rgba(0, 0, 0, 0.24) 0px 3px 8px;
border-radius: 5px;
font-size: 25px;
}

.downvoteButton{
margin-left: 2px;
border: none;
background-color: transparent;
box-shadow: rgba(0, 0, 0, 0.24) 0px 3px 8px;
border-radius: 5px;
font-size: 25px;
}

.upvoteCounterContainer{
display: block;
direction: rtl;
text-align: right;
}

.downvoteCounterContainer{
display: block;
direction: ltr;
text-align: left;
}

.upvoteCounter{
margin-right: 5px;
}

.downvoteCounter{
margin-left: 5px;
}

И мой HTML-код:

{imageLists.map((image) => {
return (






120








1241123123310



);
})}



Подробнее здесь: https://stackoverflow.com/questions/725 ... t-and-left