CSS - HTML : How to style li tags. 1 li tag then 2 directly underneath
<p>I've had many tries trying to achieve this.
I am trying to achieve 3 li tags on two separate lines. On the first line 1 li tag and directly underneath 2 li tags on one line.</p>

<p>This is what i am trying to achieve:</p>

<p><a href="https://i.stack.imgur.com/7HW4u.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/7HW4u.png" alt="enter image description here"></a></p>

<p>This is what i currently have:</p>

<p><a href="https://i.stack.imgur.com/UjXez.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/UjXez.png" alt="enter image description here"></a></p>

<p>HTML</p>

<pre><code>   &lt;section id="logout"&gt;
            &lt;nav&gt;
                &lt;ul id="l"&gt;

                    &lt;li id="email"&gt;&lt;a href="#"&gt;&lt;?php echo $_SESSION['Franchise_email']; ?&gt;&lt;/a&gt;&lt;/li&gt;
                    &lt;br&gt;
                    &lt;li class="line"&gt;&lt;a href="Franchise-Details.php"&gt;C-Panel&lt;/a&gt;&lt;/li&gt;
                    &lt;li class="line"&gt;&lt;a href="Logout.php"&gt; | Logout &lt;/a&gt;&lt;/li&gt;

                &lt;/ul&gt;
            &lt;/nav&gt;
        &lt;/section&gt;
</code></pre>

<p>CSS</p>

<pre><code>section#logout{
font-family: AmsiPro-XLight;
float:right;
padding-right: 40px;
display: inline; 
margin-right: 15px;
text-decoration: none;
font-size:1em;
width: 150px;
height: 75px;
}

ul#l li{
font-family: AmsiPro-XLight;
display: inline;

}


 li.line{
 white-space:nowrap;
display: inline;
}
</code></pre>