JSFiddle - React, Tailwind, and code Playground

HTML

<ul class="menu">
    <li class="menu-item_outerWrap">
        <span class="menu-item_innerWrap">
            <span class="menu-item">
                <span class="menu-item-icon">&darr;</span>
                <a href="/news">Новости</a></span></span>
    </li>
    <li class="menu-item_outerWrap">
        <span class="menu-item_innerWrap ">
            <span class="menu-item ">
                <span class="menu-item-icon">&darr;</span>
                <a href="/swen">Старости</a></span></span>
    </li>
    <li class="menu-item_outerWrap">
        <span class="menu-item_innerWrap">
            <span class="menu-item">
                <span class="menu-item-icon">&darr;</span>
                <a href="/profit">Всякая информация</a></span></span>
    </li>
</ul>

CSS

.menu {
    text-align: justify;
    text-justify: distribute-all-lines;
}

.menu:after {
    content: '';
    display: inline-block;
    width: 100%;
}

.menu-item_outerWrap {
    display: inline;
}

.menu-item_innerWrap {
    display: inline-block;
}

* html .menu-item_innerWrap {
    display: inline;
    zoom: 1;
}

*+html .menu-item_innerWrap {
    display: inline;
    zoom: 1;
}

.menu-item {
    display: block;
    padding-right: 15px;
    position: relative;
    text-align: left;
}

.menu-item-icon {
    position: absolute;
    right: 6px;
}

.menu-item_sizer {
    display: inline-block;
    width: 100%;
}

* html .menu-item_sizer {
    display: inline;
    zoom: 1;
}

*+html .menu-item_sizer {
    display: inline;
    zoom: 1;
}