css / html align left and right in one href
<p>Is there a way to have part of the text align left and the other right and stay in one line? I tried a few similar answers on similar questions but the result isn' close to what I'm hoping for<br>
Example: TANYA RUMPFF left and SONGS OF A BIRD RIGHT within the 440px
HTML:</p>

<pre><code>&lt;/head&gt;

&lt;div class="dean"&gt;
&lt;ul&gt;
  &lt;li&gt;&lt;a href="#"&gt;TANYA RUMPFF &lt;p align="right"&gt;Songs of a bird&lt;/p&gt;&lt;/a&gt;&lt;/li&gt;
  &lt;li&gt;&lt;a href="#"&gt;STANCE OONK Bolwerk&lt;/a&gt;&lt;/li&gt;
  &lt;li&gt;&lt;a href="#"&gt;HARALD VLUGT Voor en na het meesterwerk&lt;/a&gt;&lt;/li&gt;
  &lt;li&gt;&lt;a href="#"&gt;CORINNE BONSMA Secret garden&lt;/a&gt;&lt;/li&gt;
  &lt;li&gt;&lt;a href="#"&gt;STEFAN KASPER Glitterkikkerlikker&lt;/a&gt;&lt;/li&gt;
&lt;/ul&gt;
&lt;/div&gt;

&lt;body&gt;
&lt;/body&gt;
</code></pre>

<p>the CSS:</p>

<pre><code>.dean {width:440px;
    background-color:#74f4ff;
    }

.dean ul {
    padding-left:-12px;
    list-style-type: none;
    padding-left:0; 
    padding: 0;
}

.dean ul li  {
    list-style-position:inside;
}

.dean a:hover {
    text-decoration:none;
    color:#000;
    background-color:#fff;
}
.dean li:hover{
    margin-left:-14px;
    color:#F90;
    list-style-type:disc;
}
.dean ul a {
    text-decoration:none;
    display:block;
    padding-left:20px;
    width:400px;
    color:#000;
    font-family:Arial, Helvetica, sans-serif;
}
</code></pre>