Совместите панель навигации с текстом заголовка слева

Question

Я создаю веб-сайт с портфолио кода, который больше ориентирован на разработку игр и приложений.Прошло много времени с тех пор, как я сделал HTML, и я не могу понять, как выровнять заголовок с панелью навигации.Я не уверен, если мне нужно использовать два отдельных или если я могу сделать это с помощью CSS.

Например, я хочу, чтобы он имел такой эффект:

Youtube Channel          |-----------------------------------| Represents
Name                     |-----------------------------------| Nav. Bar

Также навигация.строка должна быть в центре между двумя строками текста

Это код, с которым я работаю:

В заголовке:

ul {
 margin-left: 150px;
 padding: 0px;
 list-style: none;
}
.name {
 color: black;
}

ul будет контролировать всеНеупорядоченный список и .name контролируют заголовок 3

В теле:

<h3 class="name">
Intentionally left blank. Refer to example text
</h3>
<ul>
UN-ordered list for links to other pages. Intentionally not adding the lines because there are a lot of un-needed lines of code here.
</ul>

Когда я запускаю его, вывод:

YouTube Channel
Name
                  |----------------------------| Represents
                  |----------------------------| Nav. Bar

И мойжелаемый результат:

Youtube Channel          |-----------------------------------| Represents
Name                     |-----------------------------------| Nav. Bar

Answer 1

Может быть так

ul {
 padding: 0px;
 list-style: none;
}
.name {
 color: black;
}

<div style="float: left; width:80%">
<h3 class="name">YouTube Channel</h3>
<h3 class="name">Name</h3>
</div>
<div style="float: right; width:20%">
<ul>Represents</ul>
<ul>Nav. Bar</ul>
</div>