Как написать текст на той же высоте другого текста, но с другой стороны?

Question

Я пытаюсь создать заголовок с черным фоном с моим именем слева, с "журналистом" под ним и некоторым текстом справа. Но я не вижу, что не так, потому что, когда я пытаюсь это сделать, другой текст появляется под уровнем двух других текстов (имя и журналист), а не на одной высоте. Помогите, пожалуйста?

Извините за язык, я бразилец и начинающий в коде.

.fundo-header {
  background-color: #2D2C2F;
  background-position: center;
  height: 14%;
}

body {
  margin: 0px;
  padding: 0px;
}

.subtitulo {
  font-weight: lighter;
  font-style: italic;
}

<header class="fundo-header">
  <div>
    <h1>Pedro Henrique</h1>
    <h4 class="subtitulo">Jornalista</h4>
  </div>
  <h2 style="text-align:right">ramdom text</h2>
</header>

Answer 1

Решение flexbox может быть лучше

<header class="fundo-header">
    <div>
        <h1>Pedro Henrique</h1>
        <h4 class="subtitulo">Jornalista</h4>
    </div>
    <h1>ramdom text</h1>
</header>

.fundo-header {
        background-color:#2D2C2F;
        background-position: center;
        height:14%;
        display:flex;
        justify-content:space-between;
}

    body{    
        margin: 0px;
        padding: 0px;
    }
    .subtitulo {
        font-weight: lighter;
        font-style: italic;
    }

Answer 2

h1, h2 и h4 являются блочными элементами и поэтому по умолчанию используют полный с родительским элементом. Вот почему h2 переходит на следующую строку.

Ниже я использовал flexbox для родительского элемента и организовал выравнивание с помощью CSS. Документация находится в коде. Надеюсь, это поможет.

body {
  margin: 0px;
  padding: 0px;
}

h1,
h2,
h4 {
  margin: 0;
} /* Reset */

h1 {
  margin-bottom: 1rem;
}

.fundo-header {
  background-color: #2D2C2F;
  display: flex;
  justify-content: space-between; /* Horizontal alignment */
  align-items: flex-start; /* Vertical alignment */
  padding: 5%;
}

.subtitulo {
  font-weight: lighter;
  font-style: italic;
}

<header class="fundo-header">
  <div>
    <h1>Pedro Henrique</h1>
    <h4 class="subtitulo">Jornalista</h4>
  </div>
  <h2>ramdom text</h2>
</header>

Answer 3

div является элементом уровня блока, что означает, что он занимает все пространство своего родителя. Вы можете обойти это, установив h2 на float: right;

<header class="fundo-header">
    <h2 style="float:right">ramdom text</h2>
    <div>
        <h1>Pedro Henrique</h1>
        <h4 class="subtitulo">Jornalista</h4>
    </div>
</header>

Если вам не нужна поддержка IE10, вы также можете использовать flexbox:

<header class="fundo-header" style="display: flex;">
    <div style="flex-grow: 1;">
        <h1>Pedro Henrique</h1>
        <h4 class="subtitulo">Jornalista</h4>
    </div>
    <h2>ramdom text</h2>
</header>