Как разместить один блок под другим, а третий справа от них?

Question

Наверное, звучит странно, но посмотрите на скрины: на первом то, как надо разместить. Для наглядности я выделил блоки красным. А на втором скрине мой результат на данный момент, причем если даже убрать "Контакты" (третий скрин), то даже так я не могу понять, как их разместить друг под другом. Что подскажете?

@media(max-width: 768px) {

.contacts {
        width: 660px;
        height: 219px;
        margin-top: 100px;
        text-align: left;

        .contacts__info {
            width: 660px;

            .mail__contacts {
                width: 270px;
                height: 50px;
                padding-left: 50px;

                .img-mail {
                    width: 50px;
                    height: 50px;
                    float: left;
                }

                .add__info-contacts {
                    padding-top: 15px;
                    padding-left: 20px;
                }
            }

            .adress__contacts {
                width: 270px;
                height: 50px;

                .img-adress {
                    width: 50px;
                    height: 50px;
                    float: left;
                }

                .add__info-contacts {
                    padding-left: 20px;
                    padding-top: 8px;
                    font-family: 'Rubik';
                    font-style: normal;
                    font-weight: 400;
                    font-size: 16px;
                    line-height: 20px;
                }
            }
        }
    }

}

<div class="contacts">
        <div class="contacts__info">
            <div class="mail__contacts">
                <img src="img/mail.svg" alt="" class="img-mail">
                <p class="add__info-contacts">[email protected]</p>
            </div>
            <div class="phone__contacts">
                <img src="img/phone.svg" alt="">
                <p class="add__info-phone-up">8 800 500 50 00</p>
                <p class="add__info-phone-down">Ежедневно с 09:00 до 20:00</p>
                <ul class="media__contacts">
                    <li class="social__contacts"><img src="img/vk_grey.svg" alt="vk"></li>
                    <li class="social__contacts"><img src="img/Instagram_grey.svg" alt="instagram"></li>
                    <li class="social__contacts"><img src="img/telegram_grey.svg" alt="telegram"></li>
                </ul>
            </div>
            <div class="adress__contacts">
                <img src="img/adress.svg" alt="" class="img-adress">
                <p class="add__info-contacts">Москва, ул. Лермонтова 60, строение 2</p>
            </div>
        </div>
    </div>
</body>

Answer 1

.row{
  width: 200px;
  height: 200px;
  display: flex;
  justify-content: space-between;
}

<div class="row">
  <div class="row-item">
    <h1>Item 1</h1>
    <h1>Item 2</h1>
  </div>
  <div class="row-item">
    <h1>Item 3</h1>
  </div>
</div>

БЛОГ НА HUSL

Как разместить один блок под другим, а третий справа от них?

Ответы (1 шт):