How to split apart a single list with CSS

Issue

I'm trying to use a single unordered list and splitting one of the list elements from the others and putting this one onto the left side and others on the right while keeping it responsive. How can I do this?

I've tried :not(.logo), I've tried using floats, I've tried just selecting .logo, I've tried space-around, I've tried checking online but all of the examples use multiple elements instead of a single list. It seems quite simple so I'm assuming I'm missing something?

Fiddle

<style>
    ul {
        display: inline-flex;
    }

    ul li {
        list-style-type: none;
        padding: 0 20px;
    }

    .logo {
        font-weight: bold;
    }
</style>
<ul>
    <li class="logo">Company Logo</li>
    <li>FAQ</li>
    <li>About Us</li>
    <li>Contact</li>
</ul>

Solution

If you don't mind giving up a flex layout, you can do something like this.

It would be easier to style if the logo were separate from the list, but it is still possible.

ul {
  text-align: end;
}

ul li {
  list-style-type: none;
  display: inline-block;
  padding: 0 20px;
}

ul li.logo {
  float: left;
  clear: both;
}

.logo {
  font-weight: bold;
}

<ul>
  <li class="logo">Company Logo</li>
  <li>FAQ</li>
  <li>About Us</li>
  <li>Contact</li>
</ul>

Answered By - Jack