CSS заставляет 2-й встроенный элемент исчезать, если 1-е переполнение

Question

Я пытаюсь создать раздел «Стоит подписаться» в Twitter, но столкнулся с проблемой переполнения.

Я хочу, чтобы «@username» исчезало, если «header» слишком длинное и переполняется заголовком с многоточием.В моем случае либо у обоих есть, и это выглядит как на скриншоте SCREENSHOT , либо у заголовка нет многоточия.

Есть какие-нибудь идеи о том, как я могу заставить это отображаться с опережением?

Соответствует CSS

.grid-wtf-profile-container1{
    display: grid;
    grid-gap: 0px;
    padding: 0;
    grid-template-columns: 25% 75%;
    grid-template-areas: 
        "logo names"
        "logo button"
}

.grid{
    background-color: transparent;
    align-items: flex-start;
    display: inline-flex;
    font-size: 14px;
    overflow: hidden;
  }

.grid-logo {
    grid-column: 1;
    grid-row: 1 / span 2;
    justify-self: center;
    align-self: center;
    grid-area: logo;
}

.grid-names {
    grid-column: 2;
    grid-row: 1;
    align-self: start;
    position: relative;
    grid-area: names;
    overflow: hidden;
    text-overflow: ellipsis;
}

.grid-button{
    grid-column: 2;
    grid-row: 2;
    justify-self: start;
    align-self: center;
    margin-top: -10px;
    position: relative;
    grid-area: button;
}

.header1{
    display: block;
    position: relative;
    font-family: 'Poppins-Light';
    font-size: 18px;
    color: #ffc30b;
    overflow: hidden;
    text-overflow: ellipsis;
}

.username1{
    display: block;
    position: relative;
    font-family: 'Poppins-Light';
    font-size: 12px;
    color: white;
    align-self: center;
    overflow: hidden;
    text-overflow: ellipsis;
}

Relevant **HTML**

<div class="grid-wtf-profile-container1">
            <div class="grid grid-logo">
                <img src="https://s3.amazonaws.com/uifaces/faces/twitter/jm_denis/128.jpg" class="user-logo-4">
            </div> 
            <div class="grid grid-names">
                <h1 class="header1"><?php echo $username2 ?></h1>
                <p class="username1"><?php echo '&nbsp;@'; echo $username2 ?></p>
            </div>
            <div class="grid grid-button">
                <button class="follow-btn">Obserwuj</button>
            </div>
        </div>