Make flexbox secondary child be under first child

December 9, 2022

I’m trying to make a table where I need to display users. I’ve made all ok but I want the email address to be under the username, but I can’t understand how can I make this happen when using flexbox.

I’ve tried to add display: block to the email div but it doesn’t work.

Can you guys help me? Thanks!

* {
    color: white;
    background: black;
}

.nav-search-users {
    width: calc(400px - 50px);
    height: 100%;
    box-shadow: rgb(136 153 166 / 20%) 0px 0px 15px, rgb(136 153 166 / 15%) 0px 0px 3px 1px;
    border-radius: 10px;
}

.nav-search-users .nav-sr-header {
    padding-top: 10px;
    display: flex;
}

.nav-search-users .nav-sr-header .nav-sr-h-title {
    margin-top: 5px;
    margin-left: 20px;
    font-size: 20px;
    font-weight: 600;
}

.nav-search-users .nav-sr-header .nav-sr-h-more {
    margin-top: 5px;
    margin-left: auto;
    margin-right: 20px;
    font-weight: 600;
    font-size: 14px;
    cursor: pointer;
}

.nav-search-users .nav-sr-list {
    border-radius: 30px;
    margin-top: 10px;
}

.nav-search-users .nav-sr-list .nav-sr-item {
    padding: 20px;
}

.nav-search-users .nav-sr-list .nav-sr-item:hover {
    background-color: lightblue;
}

.nav-search-users .nav-sr-list .nav-sr-item:last-child:hover {
    border-bottom-right-radius: 10px;
    border-bottom-left-radius: 10px;
}

.nav-search-users .nav-sr-list .nav-sr-item .nav-sr-item-content {
    display: flex;
    align-items: center;
}

.nav-search-users .nav-sr-list .nav-sr-item .nav-sr-item-content .nav-sr-item-picture {
    width: 50px;
    height: 50px;
}

.nav-search-users .nav-sr-list .nav-sr-item .nav-sr-item-content .nav-sr-item-picture img {
    width: 50px;
    height: 50px;
    object-fit: cover;
    border-radius: 50%;
}

.nav-search-users .nav-sr-list .nav-sr-item .nav-sr-item-content .nav-sr-item-name {
    margin-left: 10px;
}

.nav-search-users .nav-sr-list .nav-sr-item .nav-sr-item-content .nav-sr-item-email {
    display: block;
}

.nav-search-users .nav-sr-list .nav-sr-item .nav-sr-item-content .nav-sr-clear-item {
    margin-left: auto;
}

button {
    background: lightblue;
    border-radius: 10px;
    background-color: rgba(255, 255, 255, 0.5);
    cursor: pointer;
}

button:hover {
    opacity: 0.5;
}

<div class="nav-search-users">
    <div class="nav-sr-header">
        <div class="nav-sr-h-title">
            <span>All users</span>
        </div>
        <div class="nav-sr-h-more">
            <span>View more</span>
        </div>
    </div>
    <div class="nav-sr-list">
        <div class="nav-sr-item">
            <div class="nav-sr-item-content">
                <div class="nav-sr-item-picture">
                    <img src="https://hips.hearstapps.com/hmg-prod/images/pop-index-2020-chevrolet-corvette-c8-102-1571146873.jpg">
                </div>
                <div class="nav-sr-item-name">
                    <span class="nav-sr-in-username">My name</span>
                </div>
                <div class="nav-sr-item-email">
                    <span>email@gmail.com</span>
                </div>
                <div class="nav-sr-clear-item">
                    <button>edit</button>
                </div>
            </div>
        </div>
    </div>
</div>

>Solution :

Just wrap them in another div:

* {
    color: white;
    background: black;
}

.nav-search-users {
    width: calc(400px - 50px);
    height: 100%;
    box-shadow: rgb(136 153 166 / 20%) 0px 0px 15px, rgb(136 153 166 / 15%) 0px 0px 3px 1px;
    border-radius: 10px;
}

.nav-search-users .nav-sr-header {
    padding-top: 10px;
    display: flex;
}

.nav-search-users .nav-sr-header .nav-sr-h-title {
    margin-top: 5px;
    margin-left: 20px;
    font-size: 20px;
    font-weight: 600;
}

.nav-search-users .nav-sr-header .nav-sr-h-more {
    margin-top: 5px;
    margin-left: auto;
    margin-right: 20px;
    font-weight: 600;
    font-size: 14px;
    cursor: pointer;
}

.nav-search-users .nav-sr-list {
    border-radius: 30px;
    margin-top: 10px;
}

.nav-search-users .nav-sr-list .nav-sr-item {
    padding: 20px;
}

.nav-search-users .nav-sr-list .nav-sr-item:hover {
    background-color: lightblue;
}

.nav-search-users .nav-sr-list .nav-sr-item:last-child:hover {
    border-bottom-right-radius: 10px;
    border-bottom-left-radius: 10px;
}

.nav-search-users .nav-sr-list .nav-sr-item .nav-sr-item-content {
    display: flex;
    align-items: center;
}

.nav-search-users .nav-sr-list .nav-sr-item .nav-sr-item-content .nav-sr-item-picture {
    width: 50px;
    height: 50px;
}

.nav-search-users .nav-sr-list .nav-sr-item .nav-sr-item-content .nav-sr-item-picture img {
    width: 50px;
    height: 50px;
    object-fit: cover;
    border-radius: 50%;
}

.nav-search-users .nav-sr-list .nav-sr-item .nav-sr-item-content .nav-sr-item-name {
    margin-left: 10px;
}

.nav-search-users .nav-sr-list .nav-sr-item .nav-sr-item-content .nav-sr-item-email {
    display: block;
}

.nav-search-users .nav-sr-list .nav-sr-item .nav-sr-item-content .nav-sr-clear-item {
    margin-left: auto;
}

button {
    background: lightblue;
    border-radius: 10px;
    background-color: rgba(255, 255, 255, 0.5);
    cursor: pointer;
}

button:hover {
    opacity: 0.5;
}

<div class="nav-search-users">
    <div class="nav-sr-header">
        <div class="nav-sr-h-title">
            <span>All users</span>
        </div>
        <div class="nav-sr-h-more">
            <span>View more</span>
        </div>
    </div>
    <div class="nav-sr-list">
        <div class="nav-sr-item">
            <div class="nav-sr-item-content">
                <div class="nav-sr-item-picture">
                    <img src="https://hips.hearstapps.com/hmg-prod/images/pop-index-2020-chevrolet-corvette-c8-102-1571146873.jpg">
                </div>
                <div>
                  <div class="nav-sr-item-name">
                      <span class="nav-sr-in-username">My name</span>
                  </div>
                  <div class="nav-sr-item-email">
                      <span>email@gmail.com</span>
                  </div>
                </div>
                <div class="nav-sr-clear-item">
                    <button>edit</button>
                </div>
            </div>
        </div>
    </div>
</div>