Простите за глупый вопрос, но я не могу никак сделать так, чтобы иконки и текст появились сбоку. Я так понимаю, что мне нужно сначала задать размер одному блочному элементу и уже в нем все расставить как нужно, а уже потом другому блочному давать другие размеры и расставлять элементы уже имея размеры родителя. Не подскажите как правильно сделать?
<!DOCTYPE html>
<html lang="ru">
<head>
<meta charset="UTF-8">
<title>Document</title>
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="preconnect" href="https://fonts.gstatic.com">
<link href="https://fonts.googleapis.com/css2?family=Open+Sans&family=Open+Sans+Condensed:wght@300;700&display=swap"
rel="stylesheet">
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<header class="header">
<div class="rotate__inner">
<div class="rotate__social-info">
<h2 class="text">контактная информация</h2>
<img class="rotate__img" src="/images/rotate__inst.png" alt="">
<img class="rotate__img" src="/images/rotate__face.png" alt="">
<img class="rotate__img" src="/images/rotate__vk.png" alt="">
<img class="rotate__img" src="/images/rotate__youtube.png" alt="">
-->
<div class="container">
<div class="header__inner">
<nav class="menu">
<ul class="menu__list">
<li class="menu__item"><a class="menu__list-link" href="#">Главная</a></li>
<li class="menu__item"><a class="menu__list-link" href="#">о театре</a></li>
<li class="menu__item"><a class="menu__list-link" href="#">Наши постановки</a></li>
<li class="menu__item"><a class="menu__list-link" href="#">партнеры театра</a></li>
<li class="menu__item"><a class="menu__list-link" href="#">контакты</a></li>
</ul>
</nav>
<a class="phone" href="tel:74951234567">
+7 495 123-45-67
</a>
</div>
</div>
</div>
</div>
</header>
</body>
</html>