Предотвратите текстовый беспорядок с 2 языками

Question

У меня есть div, в котором есть 2 текстовых элемента. Каждый элемент текста может состоять из 2 языков: английский sh (язык: направление: слева направо), иврит (язык: направление: справа налево). Этот факт вызывает некоторые проблемы при объединении этих языков в текст.

HTML:

<div class="dealItemDetailsTitleStorenameContainer">
    <a class="dealItemTitle">קונסולת Xbox One S 1TB +2 Cont+THE DIVISION 2</a>
    <span class="dealItemDetailsStorename">&nbsp::&nbsp@BUG</span>
</div>

CSS:

.dealItemDetailsTitleStorenameContainer {
    grid-column: 2 / span 4;
    grid-row: 2;
    font-weight: 900;
    align-items: center;
}

.dealItemDetailsTitle {
    word-break: break-word;
    text-decoration: none;
    color: black;
    font-size: 17px;
    border: 1px solid black;
}

.dealItemDetailsStorename {
    word-break: break-word;
    color: map-get($webColors, 'secondary');
    font-style: italic;
    font-size: 14px;
}

Это результат:

Таким образом, решение проблемы, в сущности, похоже на непрерывность границы, но это не так. Я попытался float: right до .dealItemTitle, но второй внутренний элемент, .dealItemDetailsStorename, оказался ниже первого внутреннего, .dealItemTitle. Я хочу, чтобы они жили рядом.