Set Auto Width base on Contents
<p>I have the following notifications below created with the following CSS code:</p>

<p><strong>long</strong></p>

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

<p><strong>Short</strong></p>

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

<p><strong>CSS</strong></p>

<pre><code>.notifications {
    position: fixed;
    z-index: 800;
    width: 20%;
    padding: 10px;
}
</code></pre>

<hr>

<p>I'm trying to set an auto width to it base on the text/content in there </p>

<p>Here is my current attempt which I have tried: </p>

<p><strong>CSS</strong></p>

<pre><code>.notifications {
    position: fixed;
    z-index: 800;
    width: auto;
    padding: 10px;
}

.notification .right {
    margin-left: 20%;
    white-space: nowrap;
    margin-left: 5%;
}
</code></pre>

<p><strong>The result:</strong> </p>

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

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