Imagem nao alinha com a lista

Como comentado no video, a imagem tem que estar na mesma linha que se termina a lista para que esteja inline-block, mas mesmo assim nao funcionou.

html

            <section class="beneficios">
                <h3 class="titulo-principal">Benefícios</h3>
                <!--ul significa uma lista de itens sem ordem rigida, ou seja
                nao é uma lista numerada-->

                <div class="conteudo-beneficios">
                    <ul clas="lista-beneficios">
                        <li class="itens">Diferenciado</li>
                        <li class="itens">Localização</li>
                        <li class="itens">Profissionais qualificados</li>
                        <li class="itens">Atendimento aos clientes</li>
                    </ul><img class="imagem-beneficios" src="beneficios.jpg">
                </div>

                <div class="video">
                    <iframe width="560" height="315" src="https://www.youtube.com/embed/wcVVXUV0YUY"
                    title="YouTube video player" frameborder="0" allow="accelerometer; autoplay;
                    clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen>
                    </iframe>
                </div>
            </section>

css :

.conteudo-beneficios {
    width: 640px;
    margin: 0 auto;
}

.lista-beneficios{
    width: 40%;
    display: inline-block;
}

.imagem-beneficios { 
    width: 60%;
}