I’m trying to make my site responsive and when the font size is 12 everything is fine. But when I set the font size to 13 my text is getting wrap due to the lack of space. I’m ok with the text wrapping but for some reason my div is taking up extra space than necessary and the border on the right is looking awkward.
Image 1
Image 2

I would like the border on the right to be immediately after where the text ends and prevent the extra space from coming in-between. Below is my code.

<div className="Profile-Options">
    <div className={`nav-item ${activeItem === 'ROOMS ENTERED' ? 'active' : ''}`}
        onClick={() => handleItemClick('ROOMS ENTERED')}>
        ROOMS ENTERED
    </div>
    <div className={`nav-item ${activeItem === 'TX HISTORY' ? 'active' : ''}`}
        onClick={() => handleItemClick('TX HISTORY')}>
        TX HISTORY
    </div>
    <div className={`nav-item ${activeItem === 'ANALYTICS' ? 'active' : ''}`}
        onClick={() => handleItemClick('ANALYTICS')}>
        ANALYTICS
    </div>
    <div className={`nav-item ${activeItem === 'REFERRALS' ? 'active' : ''}`}
        onClick={() => handleItemClick('REFERRALS')}>
        REFERRALS
    </div>
</div>

@media (max-width:700px){
    .Profile-Options {
        display: flex;
        align-items: center;
        margin:20px 5px 0px 5px;
        padding-bottom: 5px;
        padding-left: 0px;
        border-bottom: 2px solid #434343;
    }

    .Profile-Options .nav-item {
        color: white;
        font-family: 'Proto Mono';
        padding: 0 10px;
        font-size: 13px;
        display: inline-block;
        flex-grow: 0;
        cursor: pointer;
        position: relative; 
    }

    .Profile-Options .nav-item:not(:last-child)::after {
        content: '';
        position: absolute;
        right: 0px;
        top: 50%;
        transform: translateY(-50%);
        height: 17px;
        border-right: 2px solid #800080;
    }
    
}