Как разместить один блок под другим, а третий справа от них?
Наверное, звучит странно, но посмотрите на скрины: на первом то, как надо разместить. Для наглядности я выделил блоки красным. А на втором скрине мой результат на данный момент, причем если даже убрать "Контакты" (третий скрин), то даже так я не могу понять, как их разместить друг под другом. Что подскажете?
@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>
Ответы (1 шт):
Автор решения: ArturHarutyunyan
→ Ссылка
.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>


