Не могу правильно поставить картинку и текст. HTML/CSS

Question

Мне надо, чтобы лого и текст были на одном уровне, как показано на картинке, но у меня лого съезжает вниз. Помогите решить данный вопрос(без абсолютного позиционирования). HTML:

 <body>
<div class="header">
  <div class="PiedPiperCoin">the problem | PiedPiperCoin | the</div>
  <div class="log">
    <img src="D:\Users\Никита\Desktop\site\img\Logo\log.png" />
  </div>
</div>

CSS:

.header {
color: white;
background-color: #007765;
}
.PiedPiperCoin {
text-align:right;
box-sizing: border-box;
padding-top: 28px;
padding-right: 400px;
}
 .log{
padding-top: 20px;
padding-left:500px;
}

Answer 1

У вас там все очень интересно и не понятно, ну да ладно) Если я правильно понял, то можете сделать вот так:

<div class="header">
  <div class="log">
    <img src="D:\Users\Никита\Desktop\site\img\Logo\log.png" />
  </div>
  <div class="PiedPiperCoin">the problem | PiedPiperCoin | the</div>
</div>

<style>
  .header {
    color: white;
    background-color: #007765;
    display: flex;
    justify-content: space-between;
    align-items: center;
    height: 80px;
  }
  
  .PiedPiperCoin {
    text-align: right;
    box-sizing: border-box;
    padding-right: 400px;
  }
  
  .log {
    padding-left: 500px;
  }
</style>

БЛОГ НА HUSL

Не могу правильно поставить картинку и текст. HTML/CSS

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