Put a <br> only within inline list element itself
<p>I would like to put a line break into an inline list to produce this result:
<a href="https://i.stack.imgur.com/zCmOq.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/zCmOq.png" alt="enter image description here"></a></p>

<p>However when I put a line break into my basic list, this is the result I get:
<a href="https://i.stack.imgur.com/cSIyt.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/cSIyt.png" alt="enter image description here"></a></p>

<p>How would I make it so that I can put a br within the li element only without, messing up the horizontal list itself.</p>

<p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
<div class="snippet-code">
<pre class="snippet-code-css lang-css prettyprint-override"><code>li {
  list-style-type: none;
  display: inline;
}</code></pre>
<pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;ul&gt;
  &lt;li&gt;Hello&lt;/li&gt;
  &lt;li&gt;Bonjour&lt;/li&gt;
  &lt;li&gt;Longer&lt;br&gt;text&lt;/li&gt;
  &lt;li&gt;Aloha&lt;/li&gt;
&lt;/ul&gt; </code></pre>
</div>
</div>
</p>