html – Dificuldade em colocar texto dentro da div

Estou tentando escrever dentro de uma div, mas quando rodo o projeto o texto modifica toda a estrutura da página, empurrando as imagens colocadas anteriormente. Como posso fazer com que o texto fique alinhado e não prejudique os outros elementos?

Código de apresentação das divs

 <div class="img_home">
            <div class="img_menor3">
                <div class="img_menor">
                    <img src="https://pt.stackoverflow.com/imgs/home/oalienista.jpg"><div class="cols">TÍTULO: Dom Casmurro</div>
                            <div class="cols">AUTOR: Machado de Assis</div><br>
                            <div class="cols">EDITORA: Antofagica</div><br>
                            <div class="cols">CATEGORIA: Romance</div><br>
                            <div class="cols">CLASSIFICAÇÃO: 10</div><br>
                            <div class="cols">DESCRIÇÃO: Por além da narrativa entre Bentinho e Capitu, o romance traz reflexões sobre o Brasil da época relevante até os dias atuais.   </div>
                    <div class="img_menor2">
                    <img src="imgs/home/rating1.png"></div>  
            </div>               
                    
                    </div>
               
                <div class="img_menor">
                    <img src="imgs/home/memorias.jpg">
                    <div class="img_menor2">
                    <img src="imgs/home/rating (2).png"></div>
                </div>
            

            <div class="img_menor3">
                <div class="img_menor">
                    <img src="imgs/home/dom.jpg">
                    <div class="img_menor2">
                    <img src="imgs/home/rating1.png"></div>
                </div>
        </div>
           </div>

CSS

.img_menor{
    max-width: 300px;
    max-height:500px;
    width: auto;
    height: 1200px;
    position:relative;
    display:flex;
    flex:initial;
    align-items: center;
    background-color: #34343d;
    margin-left: 2%;
    border-radius:5px;
    vertical-align:initial;
    border-style: solid;
    border-color: rgb(52,52,5);
}

.img_menor3{
    max-width: 300px;
    max-height:500px;
    width: auto;
    height: 1200px;
    position:relative;
    display: flex;
    flex:initial;
    text-align:left;
    align-content: center;
    align-items: center;
    background-color: palevioletred;
    margin-left: 2%;
    border-radius:5px;
    vertical-align:initial;
    border-style: solid;
    border-color: rgb(52,52,5);
}

.img_menor2{
    max-width: 300px;
    max-height:5000px;
    width: 500px;
    height: 120px;
    position:relative;
    display:flex;
    flex:initial;
    align-items: center;
    align-content: center;
    margin-left: -117%;
    border-radius:5px;
    margin-top:250px;
    vertical-align:initial;
    
}


.img_menor2 img{
    width:6px;
    height:3px
}

.img_home{
    max-width:600px;
    max-height:500px;
    width: auto;
    height: auto;
    position:relative;
    display:flex;
    flex:initial;
    align-items: center;
    margin-left: 30px;
    vertical-align:unset;
}

inserir a descrição da imagem aqui
A div rosa é a img_menor3, a azul é a img_menor e a img_home é maior. Como pode ser visto na imagem, o texto é inserido em baixo da div, sendo que eu queria ele alinhado dentro da div img_menor.