Не получается выставить div в строку
Вывожу Black + White. red,orange и blue не получается выставить в строку. Да,я знаю что div это блочный елемент,но как тогда это все сделать? как обыграть что бы div был в левой части а остальное в правой части легко и просто?
* {
padding: 0;
margin: 0;
}
@import url('https://fonts.googleapis.com/css2?family=Roboto&display=swap');
body {
font-family: 'Roboto', sans-serif;
margin-left: 200px;
margin-top: 50px;
}
#black {
font-size: 30px;
display: inline-block;
}<body>
<header>
<div id="black">
<p><b>Black</b> + White</p>
<p>red</p>
<p>orange</p>
<p>blue</p>
</div>
</header>
</body>