Как выровнять text и конку внутри блока?

Question

[Denioo]

Здравствуйте, немогу додуматься как выровнять по центру иконку и текст после нее, пока получается так:


а надо так:


Код:

<div class="dropdown__info__checkbox">
                    <input type="checkbox" class="hide__info" id="info_1">                    
                    <label for="info_1"><i class="material-icons">trending_up</i>Statistics</label>
                    <div class="information"><div><img src="./img/pt.png" alt=""><p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in</p></div></div>
                </div>

Sass

.dropdown__info
            margin: 0 400px 0 400px
            .dropdown__info__checkbox
                text-align: start
                width: 100%
                height: 100% 
                margin-top: 20px                                      
                .material-icons
                    display: flex
                    vertical-align: middle
                    padding-right: 20px
            .hide__info
                display: none
                width: 100%
            .information
                display: none
                padding: 15px
            .information div
                display: flex     
            .hide__info:checked + label + .information
                display: block 
                background: #ffffff
                box-shadow: 0 2px 5px rgba(0, 0, 0, 0.13)
                border-radius: 5px                             
            .hide__info + label                
                display: flex
                justify-content: flex-start
                border: 1px solid #ffffff
                width: 100%
                box-shadow: 0 2px 5px rgba(0, 0, 0, 0.13)
                height: 50px
                border-radius: 5px
            &__checkbox label
                cursor: pointer

https://jsfiddle.net/5zpkv2ry/1/

Answer 1

[ildar-meyker]

Подготовьте свой пример на https://jsfiddle.net/.

Comments

[Denioo]

Такс, ну вот https://jsfiddle.net/5zpkv2ry/1/

[ildar-meyker]

Из примера видно, что вы довольно многословны в своем css и слишком увлечены флексом. Изучите основы. Я не пытался исправить все, лишь подкорректировал пару правил. https://jsfiddle.net/ildar_meyker/0nrypz96/1/

[Denioo]

ildar-meyker, Спасибочки, как раз вот только начал изучать флекс на примере)