Как я могу сделать изображения и текстовый уровень?

Question

У меня есть два изображения с описанием под ними. Изображения оба разных размеров. Когда у меня есть описание в одну строку, все выровнено. Однако, когда у меня есть изображение с двухстрочным описанием, оно выглядит так:

Я хочу, чтобы изображения были выровнены, а первая строка описаний выровнена друг с другом.

my html:

<ul class="wrapper">
                    <li class="inner">
                        <img class="" src="../assets/images/smallimg.jpg" alt="superstar" />
                        <p class="">small image</p>
                    </li>
                    <li class="inner">
                        <img class="" src="../assets/images/bigimg.jpeg" alt="zoom" />
                        <p class="">Biggerr big image sddas sdfdf dfs</p>
                    </li>
                </ul>

My css:

    .wrapper{
    list-style: none;
}
.inner{
    display: inline-block;
    background-color: blue;
    width: 250px;
}
.inner img{
    width: 250px;
    height: auto;
}

Если вы можете помочь, это будет высоко ценится. Я искал решения.