Align image to left and navbar to right - html

Question

I need to have image on left side and navbar on right side... but the navbar must be vertically centered with image.. On jsfiddle I made it up to set navbar vertically to center but I am not able to put it on the right side... I will be glad for any help.
JSFiddle: https://jsfiddle.net/polluxik/0Lqubpe6/20/
ul {
display: flex;
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
align-items: center;
}
ul img {
height: 100px;
}
li a {
display: block;
color: #262353;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}
<ul>
<img src="https://upload.wikimedia.org/wikipedia/commons/thumb/7/77/Google_Images_2015_logo.svg/640px-Google_Images_2015_logo.svg.png">
<li><a class="active" href="#">test</a></li>
<li>test2</li>
<li>test3</li>
<li>test4</li>
</ul>
*in jsfiddle I used random image from google as a placeholder

Answer 1

One approach is below, with corrected HTML (the only valid child of a <ul> or <ol> is an <li>, so the <img> is now appropriately wrapped):
ul {
display: flex;
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
align-items: center;
/* aligning the content of the <ul> to the end
of the inline axis: */
justify-content: end;
}
ul img {
height: 100px;
}
li a {
display: block;
color: #262353;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}
li:first-child {
/* setting the margin of the inline-end of the
first-child <li> element to 'auto', in order
to push the first-child away from the rest of
the content: */
margin-inline-end: auto;
}
<ul>
<!-- wrapped the <img> in another <li> element for validity: -->
<li><img src="https://upload.wikimedia.org/wikipedia/commons/thumb/7/77/Google_Images_2015_logo.svg/640px-Google_Images_2015_logo.svg.png"></li>
<li><a class="active" href="#">test</a></li>
<li>test2</li>
<li>test3</li>
<li>test4</li>
</ul>
JS Fiddle demo.
References:
justify-content.
margin-inline-end.

Answer 2

We can define the image and navbar items in different div and then using flexbox we can align the two div horizontally using justify-content:space-between.
ul {
display: flex;
justify-content: space-between;
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
align-items: center;
}
.nav {
display: flex;
gap: 10px;
}
ul img {
height: 50px;
}
<ul>
<div class='logo'>
<img src="https://upload.wikimedia.org/wikipedia/commons/thumb/7/77/Google_Images_2015_logo.svg/640px-Google_Images_2015_logo.svg.png">
</div>
<div class='nav'>
<li><a class="active" href="#">test</a></li>
<li>test2</li>
<li>test3</li>
<li>test4</li>
</div>
</ul>