Flexbox.элементы не выровнены на одной высоте

Question

Я создал элемент-обертку, который содержит 2 блока встроенных блоков рядом друг с другом (аква и желтый на рисунке).Затем я создал еще два div, вложенных в один из встроенных блоков для центрирования контента.Это работает, но по какой-то причине вертикальное положение моего flexbox смещено вниз, даже если я не использую поля, отступы или абсолютное позиционирование.Если у кого-то есть идея, почему это происходит, пожалуйста, просветите меня!Я был бы очень признателен.

Визуальное представление:

HTML-код:

  <section className="summary">
                <div className="summary-wrapper">

                    <div className="user-wrapper">
                        <div className="user-wrapper__photo">
                            <div className="user-wrapper__photo-avatar">
                                test
                            </div>
                        </div>

                        <div className="user-wrapper__userInfo">
                            <div className="user-wrapper__userInfo-text">
                                <div>Rodney Wormsbecher</div>
                                <div>Software developer</div>
                            </div>
                        </div>
                    </div>

                </div>
            </section>

Код SCSS:

.summary {
    height: 20rem;
    background-color: #333;
    width: 100%;
    display: block;
    -webkit-clip-path: polygon(0 0, 100% 0, 100% 85%, 0% 100%);
    clip-path: polygon(0 0, 100% 0, 100% 75%, 0% 100%);
    padding: 40px;
    color: white;

    &-wrapper {
        width: 100%;
        height: 8rem;
        // background: red;
    }

    & .user-wrapper {
        display: inline-block;
        width: 20rem;
        height: 5rem;
        background: yellow;

        &__photo {
            display: inline-block;
            background:  aqua;

            &-avatar {
                display: flex;
                align-items: center;
                justify-content: center;
                background: pink;
                height: 5rem;
                width: 5rem;
                border-radius: 50%;
            }

        }

        &__userInfo {
           display: inline-block;

           &-text {
            display: flex;
            padding-left: 1.5rem;
            height: 5rem;
            width: 15rem;
            align-items: flex-start;
            flex-direction: column;
            justify-content:  center;

           }
        }
    }
}

Answer 1

Я обнаружил, что для полей с display: inline-block требуется свойство 'vertical-align: top'.Затем мне пришлось перестроить элемент flexbox.

Обновлен SCSS:

.summary {
    height: 20rem;
    background-color: #333;
    width: 100%;
    display: block;
    -webkit-clip-path: polygon(0 0, 100% 0, 100% 85%, 0% 100%);
    clip-path: polygon(0 0, 100% 0, 100% 75%, 0% 100%);
    padding: 40px;
    color: white;

    &-wrapper {
        width: 100%;
        height: 8rem;
        // background: red;
    }

    & .user-wrapper {
        display: inline-block;
        width: 20rem;
        height: 5rem;
        background: aqua;
        vertical-align: top;

        &__photo {
            display: inline-block;

            &-avatar {
                display: flex;
                align-items: center;
                justify-content: center;
                background: pink;
                height: 5rem;
                width: 5rem;
                border-radius: 50%;
            }

        }

        &__userInfo {
           display: inline-block;
           vertical-align: top;

           &-text {
            display: flex;
            padding-left: 1.5rem;
            height: 5rem;
            width: 15rem;
            align-items: flex-start;
            flex-direction: column;
            background-color: yellow;
            justify-content: center;
           }
        }
    }
}