如果第一个溢出，CSS使第二个内联项消失

Question

我正在尝试创建Twitter的“值得关注”部分，但遇到了溢出问题。

如果'header'太长并且以带有省略号的header溢出，我想让'@username'消失。就我而言，要么都拥有它，而且看起来像是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>